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

[code language=”javascript”]
<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

[code language=”javascript”]
$(‘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;


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

[code language=”javascript”]
$(‘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

[code language=”html”]
<ul class="programList">
<li>The program name
<div class="hidden"><!– class hidden on CSS .hidden{ display:none;} –>
Text for program, bla blabalba balblablalblablalb

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

[code language=”javascript”]
$("p").click(function () {


<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]

Focus on what matters!

Focus on what matters!

No more wasting time trying to figure out how to code it all!  Sign up below and I'll share my tips and tricks on how to build websites fast, professionaly, and with minimum code!

You have Successfully Subscribed!