Wordpress is great, but it’s built in search functionality can do with a little sprucing up. For example, if you enter an empty search, it takes you to the home page and displays all posts, instead of a search archive page. Not very useful, but we have a simple way to counteract that. Using a bit of JQuery and form field manipulation, you can prevent the default submission if the form field is empty, and alert the user that they haven’t entered any search terms.

In this lab, I’m going to demonstrate how to create a fixed navigation, single page site with smooth scrolling, and highlighting the navigation link depending on which section is currently being viewed. This technique is great for single page sites that want to pack in lots of goodies on one page, but use a navigation with cool scrolling to section it off.

In this lab, we demonstrate how to make a div box slide down on click using the JQuery click function. When we click our login button, a div box slides down with the login form, allowing users to login on the same page instead of going to a different page. To do this, we create a login link in our navigation, hide the login box with css, and then apply the toggle function after the login button is clicked. This slides down the menu, and swaps out the login button class to show an expanded image.

In this lab, we create a single page FAQ with toggling answers using JQuery and some CSS. This is a good solution because it conserves space, allowing users to easily see all the FAQ’s first before clicking on one to see the answer. Clicking on one also toggles or slides the answer down into view, instead of moving to another page. Without further ado, let’s get into it.