Search bar

[Tahtoh]

How can it be possible to implement a search button that when clicked would give a text field in wich you write the searched item and then when clicking on the search makes the search box disappear again and button reappears.
I don’t know if i explained it well but i tried playing with some hidden css classes etc but didn’t manage to make it work.

Html:

 <div class="top-bar">
        <ul class="menu">
          <li><a href="#">Subscribe</a></li>
          <li class="menu-text">This is a blog</li>
          <li><a href="#"><i class="fa fa-search " ></i>Search</a></li>
          
          <div class="search-box hidden">
            <input type="text" id="search-box"><br>
          </div>
        </ul>
    </div>

Thanks

[droopsnoot]

The way I used to do it to display “Searching” instead of a search form was to enclose the form in a div and set the display attribute for that div to “hidden” as soon as the button is pressed, then set the display attribute for the “searching” gif (!) to visible at the same time . Mine wasn’t Ajax, so when the results came back the whole page would be re-drawn, but in your case you could have the return from the Ajax call re-enable the search div.

[m3g4p0p]

@Tahtoh

How can it be possible to implement a search button that when clicked would give a text field in wich you write the searched item and then when clicking on the search makes the search box disappear again and button reappears.

I’m not entirely sure how you mean this… clicking which search, the button? And which button is supposed to be hidden then that should reappear?

BTW, note that a div is not a valid child of an ul element – this should either be within the search li element or outside the list.