Customer Inquiries

1001 Mark Boulevard St.

New York, NY, US.


Mon - Sat 8.00 - 18.00


Sales department

+01 2345 6789

JQuery Toggle Panel


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
Here we are stating that our page element with the class ‘trigger’ is going to do something when it’s clicked on
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 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