Quick Tut: jQuery Toggle

Tutorials »
March 28th, 2010 »
alexhughes

Today we’re going to have a quick look at how we can toggle elements using CSS and jQuery. This can be used for creating drop down panels, revealing images to your users demand and hide them for that case too. All of this can be easily done by using the greatly popular javascript framework jQuery.

What is jQuery?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. You can find out more about jQuery at www.jquery.com

Step 1 – Including jQuery into your page

You need to download and include jQuery into your choice you do this by downloading the jQuery library from the jQuery website and enter the amended version of the following code into the head of your site.

1	<script type="text/javascript" src="path/to/jquery-1.4.2.min.js"></script>

Step 2 – jQuery Function

Now it’s time to put jQuery to work by calling on the functions needed to trigger the display of our chosen element. First we’ll take a look at the code then break it down and explain.

<script type="text/javascript">
$(document).ready(function(){
       $("#trigger").click(function(){
	       $("#to_be_revealed").slideToggle("slow");
	});
});
</script>

First we must get the pages to acknowledge and load the script which we do by using the .ready() function. This will then contain the functions needed. First we are going to define the trigger of our function which in our case is the element with an id of “trigger”, using the jquery function .click we tell the browser that when the element “trigger” is clicked to proceed on, contained within the click function is the next function needed which will show our needed element, in this case the “to_be_revealed” element. Using the jquery function “slideToggle” we then tell the browser to toggle the “display” css property with a slide effect at the speed of slow.

Step 3 -The HTML

Now we need to simple add the trigger and to be revealed elements to our html document, this is done simple and can be done using the majority of the HTML elements.

<div id="trigger">Click me</div>
<ul id="to_be_revealed">
       <li>This cool list will then be revealed</li>
       <li>And when you re click the trigger, it will go again.</li>
</ul>

Step 4 – Finally, the CSS

Now it’s time to style the trigger and to be revealed element, the only css declaration required is to set the “to_be_revealed” element to “display:none;”.

#trigger {
      font-size: 12px;
      text-decoration: underline;
      font-weight: bold;
      color: #000000;
}
ul#to_be_revealed {
     display: none !important;
     background: #FFFFFF;
     border: 1px solid #666666
}

That’s all it takes to add some functionality to your elements which may or may need to be shown. jQuery makes life allot easier and that’s one of the reasons avato studios developers love it so much! Combined with your imagination, simple actions like the one we’ve looked at today can become a great asset to your website.

Remember to subscribe to our RSS feed or follow us on twitter for more tutorials, news and educational resources. Thanks for reading, your avato studios team!

We are Avato Studios and we design great looking effective websites for businesses worldwide.