Reusable Jquery Toggle

jQuery is a great tool. If you’re anything like me, learning JavaScript and getting it to do what you want was one of the most frustrating tasks imaginable. jQuery simplifies it to the point where you don’t have to be a code ninja to make it do cool things for you. Here I share with you my reusable toggle script that hides content you wish to be hidden, then shows it by clicking a link, and then hides it again by clicking the link one more time. It is useful for many applications.

The Code

   // START ready function
   $(document).ready(function(){
 
	// TOGGLE SCRIPT
	$(".hide").hide();
 
	$("a.toggle").click(function(event){
		$(this).parents(".article").find(".hide").toggle("normal");
 
		// Stop the link click from doing its normal thing
		return false;
	}); // END TOGGLE
 
   }); // END ready function

Using the Script

  1. Copy and paste the script into a new javascript.js file, name of your choice.
  2. Download the latest Jquery minified build.
  3. Link to both of these .js files within the <head> tag of your site like this:
    <script src="jquery-1.3.1.min.js" type="text/javascript"><!--mce:0--></script>
    <script src="script.js" type="text/javascript"><!--mce:1--></script>
  4. You’re done! Now follow the instructions on how to set up your XHTML to use the code.

Setting up the XHTML Markup

Now all you need to do is set up your markup like this:

<div class="article">
   <a class="toggle" href="#">Toggle This »</a>
<div class="hide">
 
Hidden toggle content goes here</div>
</div>

So here’s what you do: encase the whole shebang in a <div> with the class of “article.” You can change this class name if you want by changing the script.js you’ve created, but article works for me. Next include the toggle link. This link will display the hidden content inside the <div class=”hide”> that Jquery hid automatically for you upon page load. Click the link again and it is hidden again. Hence, toggle.

Here’s what happens: When the toggle link is clicked, Jquery then looks for the <div> with the class of “hide” that is within the <div> with the class of “article” that the toggle link also happens to be within. Therefore, you can reuse this markup as many times as you want without adjusting the script.

Examples

This markup:

<div class="article">
   <a class="toggle" href="#">Toggle 1 »</a>
<div class="hide">
 
Hidden toggle content 1.</div>
</div>
<div class="article">
   <a class="toggle" href="#">Toggle 2 »</a>
<div class="hide">
 
Hidden toggle content 2.</div>
</div>
<div class="article">
   <a class="toggle" href="#">Toggle 3 »</a>
<div class="hide">
 
Hidden toggle content 3.</div>
</div>

Produces:

Toggle 1 »

Hidden toggle content 1.

Toggle 2 »

Hidden toggle content 2.

Toggle 3 »

Hidden toggle content 3.

I hope you enjoy.

| More
  

7 Comments

  1. Daniel says:

    Pretty cool. Guess it’d be a thing to use for sub-menus perhaps?

  2. Jason says:

    It could work well for sidebar vertically listed navigation. If you used it for header type horizontal sub-menus it could cause some wacky things to happen. It likes to push the content of the entire <div> downward, potentially messing up your layout.

    That being said, there are better Jquery alternatives for sub-menu navigation.

  3. revive says:

    You could also do this for a FAQ section, or reuse it on a basic accordion, etc.. here is the code I use:

    FAQ JS CODE

    $(document).ready(function() {
    $('#faq').find('dd').hide().end().find('dt').click(function() {
    $(this).next().slideToggle();
    });
    });

    FAQ HTML

    Question
    Answer

    Question
    Answer

    Question
    Answer

    Cheers.. and great article.

  4. DG says:

    I still can not find a way to only be able to toggle one at a time. I really dislike the ‘accordian’. I’d also love to be able to have an arrow changing when the toggled section is “on” but one bridge at a time… Any ideas?

  5. Jason says:

    DG:

    I’ve fooled around with trying to do just that. I know there is a really simple way to do it that I’m just missing. When I figure it out, I’ll post it here.

  6. Beben Koben says:

    nice toggle…very useful web…
    salam bloglang anu ganteng kalem tea :D

  7. njn says:

    im very helped with ur simple tutorial..
    Thxx ya ..

Post a Comment

Allowed Tags »
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">