Don’t Worry, You’re In The Right Place
A lot of these posts were originally on So if you found them through search engines or clicking around, this is their new home :). Enjoy!

JQuery Simple Toggle Script

*UPDATE 5/21/12: Check out the Read More Read Less jQuery Simple Toggle Script

*UPDATE: IE Fix and Symantics

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.

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.

Step 1: Add This jQuery To The Header

<script type="text/javascript" src=""></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 (

Step 2: Add this jquery toggle code to the header

$(‘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.

$(‘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

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

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.

Jquery Toggle Version 2

Javascript Part

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


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

*UPDATE 5/21/12: Check out the Read More Read Less jQuery Simple Toggle Script 

About the Author
What's UP! This is my site, I write 99% of the articles on here. I'm also the owner of I help out a lot of developers and designers getting into the web game. Helping is fun for me, so feel free to ask me any questions! I've made courses and have a membership as well to help get you on your feet!

0 comments on JQuery Simple Toggle Script

Leave a Reply

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

Scroll to top