JQuery Simple Toggle Script

[sws_yellow_box box_size="665"]*UPDATE 5/21/12: Check out the Read More Read Less jQuery Simple Toggle Script [/sws_yellow_box]

[sws_yellow_box box_size="665"]*UPDATE: IE Fix and Symantics [/sws_yellow_box]
This is something that I use all the time.  I saved it as a doc so I didn’t have to constantly recreate it. Basically what it does is it toggles the preceding element after the sibling is clicked… WHAT?  Take a look at the code.
[sws_yellow_box box_size="665"]There are so many ways to make this work, the mistake with the code right now is IE6 and IE7 don’t like it. Why? Well symantically speaking, you can’t have a div tag inside a ul tag. You can have it in a li tag though. So the new version reflects that, and I also added another way to do it as well. [/sws_yellow_box]

Step 1: Add This jQuery To The Header

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

If you’re using wordpress, about 90% of the time jquery is already being called, if it’s not you can take a look at this tutorial (Digwp.com).

Step 2: Add this jquery toggle code to the header

$(document).ready(function(){
$('ul.programList li').click(function(){
$(this).children('div').slideToggle(); /* children() finds the tags inside of the li tag */
$(this).toggleClass("minus_icon");  /* This adds a new class to the li incase you want to swap images */
return false;
});
});

Breakdown

I’ll assume you already know about the (document).ready function, let’s go straight to the action.

$('ul.programList li').click(function(){

ul.progamList li is the selector that you want clicked. When it’s clicked, that’s what causes the toggle.

Word of caution, I use this in lists a lot BUT if you have a list within a list, this code will still be active on the li tags as well. The solution: use a child selector. So instead of ul.programList li, you would use ul.programList>li. The little “>” means that it will only select the child elements. I’ll get more into child, parent, siblings, etc., when I start my Real World CSS Course.

The rest of the code is commented so if you have any questions, feel free to ask.

The HTML that makes it all work

<ul class="programList">
	<li>The program name
<div class="hidden"><!-- class hidden on CSS .hidden{ display:none;} -->
 Text for program, bla blabalba balblablalblablalb
</div>
</li>
</ul>

And Boom, now you have a fully functional jQuery Toggle Script!

[sws_yellow_box box_size="436"] Other Note: You don’t have to use li tags and divs.  The script will work just as well with any other tag.  Just make sure that your script tags match up with your HTML tags. The important thing here is the classes. [/sws_yellow_box]

Jquery Toggle Version 2

Javascript Part

$("p").click(function () {
      $(this).next().toggle("blind");
    });

HTML

<p>This is what you click</p>
<div class="hidden">This is what will show.</div>

[sws_yellow_box box_size="665"]*UPDATE 5/21/12: Check out the Read More Read Less jQuery Simple Toggle Script [/sws_yellow_box]

Want to learn how to create a Genesis Child Theme from scratch?

I created a course that shows exactly how to do it with the FREE Genesis Sandbox theme! Get more info.

p.s. there's a Toolset Course also available.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>