CALL 425.830.8350 FOR CUSTOM WORDPRESS DESIGNS

UPDATED!

More examples provided in the demo

Sometimes we’re convinced that certain special effects we see in web pages are some sort of cult voodoo and appear mysterious. The ‘slide toggle’ effect is one of those. We’re going to show you just how easy it is to use this cool feature for revealing hidden content.

We’re going to make a simple panel slider using the JQuery toggle function. Here’s how the code will look:

Code Explanation

Let’s break this down to show how simple it is using JQuery

$(document).ready(function() {
Our standard JQuery statement declaring that when the document is fully loaded we can execute the following
$(“.trigger”).click(function(){
Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on
$(“.panel”).slideToggle(“slow”);
Here we see the details of our instructions for when the ‘trigger’ is clicked. Essentially telling the div with the class name ‘panel’ to ‘slide – Toggle’ open. The ‘Toggle’ part means that it will open when clicked then close when clicked again.

The HTML

The HTML is relatively simple. First, though, we need a little styling for our elements

Followed by our HTML which is entirely up to you how you want it to look. For our demo purposes we’re using just the standard Lorem Ipsum text jargon:

Live Demo

To get a live view of the sliding/toggling panel Click Here

Pin It on Pinterest

Share This