how to create a slide down search form

Question

I am trying to create a search form in my navigation bar. I want a little magnifying glass symbol in my navigation bar and when you press on the symbol a search form will drop down ( like this site - http://goodlife.fuelthemes.net ). I have added a search form and an icon however I can't get the search form to slide down from the icon. Does anyone have any solutions? Thanks in advance.

searchform.php & css

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
  <input type="submit" class="search-submit" value="Search" />
</form>

you need a toggle function. maybe this question can help you: https://stackoverflow.com/questions/20997687/javascript-hiding-and-showing-div-tag-with-a-toggle-button — Sysix, Jun 12 '17 at 17:51
You can actually inspect their code in a browser and easily see how they do this... — Jason Bassett, Jun 12 '17 at 17:54

Michael Coker · Accepted Answer · 2017-06-12T18:54:44.663

You can add a click event handler to the label that toggles the display/position of the input. I also moved the input outside of the label and gave it a for/id pair that connects them.

document.getElementById("search-label").addEventListener("click", function(e) {
  if (e.target == this) {
    e.preventDefault();
    this.classList.toggle("clicked");
  }
});

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

.search-form {
  position: relative;
}

.search-form label {
  position: relative;
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
  background-size: cover;
  width: 50px; height: 50px;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
}

.search-input {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity .25s, transform .25s;
  left: 0;
  z-index: -1;
  border: 0;
  outline: 0;
  
}
.search-label, .search-input {
  background: #ccc;
  padding: .5em;
  display: inline-block;
}

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
}

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label for="search-input" id="search-label" class="search-label">
    Search for:   
    </label>
<input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
  <input type="submit" class="search-submit" value="Search" />
</form>

This does not seem to be working. The search icon appears but I am not able to click on it. To add in the js all I have to do is add it to a file inside my js folder called search.js and the enqueue it in my functions, right? I'm not sure I added it in correctly. — user6738171, Jun 12 '17 at 18:09
I have tried removing z-index: -1 and still nothing happens when clicking the icon. — user6738171, Jun 12 '17 at 18:34
@user6738171 the demo in my answer to your problem - the code in the answer above you're replying to. There is a "run code snippet" that lets you run that code. — Michael Coker, Jun 12 '17 at 18:44
Sorry I did not know about this function. The slide down function works but the image icon does not appear. Instead of search for: I'm trying to have it just be an icon of a magnifying glass. — user6738171, Jun 12 '17 at 18:47
@user6738171 just put the magnifying glass as a background image of the label. Updated my answer. — Michael Coker, Jun 12 '17 at 18:55
Hey Michael, I know you already answered my question but I would really appreciate it if you could help my out. I can't get this to work correctly on my wordpress site. I think I am adding in the javascript wrong. Would you mind helping me out? — user6738171, Jun 12 '17 at 21:24
@user6738171 sure, I'm available for contract work, I'm sure we could work something cheap out over paypal if you're interested. Lemme know or feel free to hit me up via my linkedin profile here on on stackoverflow profile. — Michael Coker, Jun 12 '17 at 21:33

score 0 · Answer 2 · answered Jun 12 '17 at 18:04

You can use JQuery .slideToggle() for this

$('.search-field').click(function() {
  $(this).next('.search-form').slideToggle();
});

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}
#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
.search-field {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-field:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}
.search-form {
  border: 1px solid black;
  padding: 3px 0;
  color: white;
  background-color: black;
  display: none;
  width: 230px;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="search-field">
  <i class="fa fa-search" aria-hidden="true"></i>
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="" placeholder="Search …" value="" name="s" title="Search for:" />
  </label>
  <input type="submit" class="search-submit" value="Search" />
</form>

how to create a slide down search form

2 Answers2