Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
And inside here I'm going to say exactly what it does in the comments. So toggles, header search on and off. So I'm going to create a JQuery function so I'll start by saying JQuery and it's going to be acting on the document when the document is ready and it's going to be a function that acts on anything that has a dollar sign on it. I'll put in a curly bracket and then end my function, and now I have a complete JQuery function. So now, anything within here will be JQuery and will be loaded when the document is ready.
Now I'm going to target any event where someone clicks on the search toggle class. So I'll start by saying $.searchtoggle because we're targeting the class and then I say click, so that's what happens, you click on it., this triggers a function and that function is going to be that the search container ID either shows or hides. And to this there's a muriate of different functions we can use. So I'm going to use the one that's called slide toggle. So here I am going to make almost the same call as I did before.
I am going to start with a dollar sign and I'm now targeting ID search container and I want the search container to slide toggle and I want it do it slowly and that's it. So what will happen now is when you click on Search Toggle, the search container will slide toggle slowly. Now I can save Hide Search and I need to enqueue Hide Search into my site. So I'll go to functions.php, scroll down to the enqueue section, which you'll find here.
And then I'm going to copy one of my existing enqueue functions so I don't have to write all the codes. So I'll copy this one and then I will paste it in maybe after Super Fish and then I need to change it so here I'm going to give it a new name, call it Hide Search. I have to change the target file so that it's the right file so this would be hide search.js. This hide search has the dependency of JQuery, so that's correct. It's still the fourth of the fourth, and everything else is correct.
Now I can save this, and what will happen when I reload my page now is the new custom JQuery will be loaded into the page. And now, if I click on the search button. The slide toggle function kicks in. And will slide toggle this section open and shut. So now that I know it works, I can add additional features. You'll notice that, first of all, when I reload the page here, the search field is open by default. To change that, I can simply go to my styles, and then hide the search field by default.
So I'll go scroll down here, and I'll find search-box-wrapper and I'll change display to none. When I reload my page now, you'll see the search form is hidden, and then when I click on the search box, it reveals itself. And then, I also wanted to add an extra function so that when the search form is revealed I see the search button highlighted. And to do that, I'm going to go back into hide search and inside the slide toggle I'm going to add a comma and then add a new function.
And that function will target the search toggle again. And I'm going to toggle a class on and off here and I'll toggle the class active. So, what happens now is when the search container is clicked, we also add the active class to the search toggle and it will remember that the active class that you see here matches the hover class. So if i save hide search now and reload my page one more time, you'll see the search field is hidden by default, and when I click on the search button, the search button remains highlighted until I click on it again.
The search field disappears, and the highlighting disappears as well. So now we have the complete search function, and if you resize your window, you'll see that all the way down to the mobile size, this search function is fully responsive and works well. So this will work just as well on a mobile device as it does on a large computer screen.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 65971 Viewers
61 Video lessons · 96599 Viewers
56 Video lessons · 110325 Viewers
82 Video lessons · 105124 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.