1001 Mark Boulevard St.

Mon - Sat 8.00 - 18.00

Sales department

JQuery Toggle Panel

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:

1

2

3

4

5

6

7

8

"]

<script type="text/javascript">

$(document).ready(function(){

$(".trigger").click(function(){

$(".panel").slideToggle("slow");

});

});

</script>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

"]

<style type="text/css">

div.panel,p.trigger {

width:500px;

padding:20px;

background-color:#EAEAEA;

border:1px#000dashed;

font:normalnormalArial,Helvetica,sans-serif/1.2em;

}

div.panel {

height:200px;

display:none;

}

</style>

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:

LATEST POSTS

Lately i've been using Divi for the majority of my projects since it's such a great theme for adapting to any type of business or service. And, my clients like the drag 'n drop interface which, oddly, is easier to teach to someone than the standard Wordpress editor...