SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Noob jQuery question: how to make collapsable lists?

    So I'm trying out jQuery this week... And am messing with lists that I want to toggle on and off using jQuery.

    I have in my HTML code the lists:

    Code:
    <h3>Header For List</h3>
    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    </ul>
    I have multiple groups of these lists on my page, each with their own header... But I want to use jQuery to allow me so when I click on the <h3> header of the list, the list will either disappear or appear...

    At the moment, I'm using this JS code:

    Code:
    	<script type="text/javascript" src="jquery-1.2.5.js"></script>
    	<script type="text/javascript">
    		//jquery stuff here...
    		//run code when DOM has loaded...
    		$(document).ready( function() {
    		
    			$("h3").click(function () {
    				 $("ul").slideToggle("slow");
    			});
    
    		//end of main jquery launch code
    		});
    	</script>
    But this obviously makes all the lists appear and disapear when I click any of the headers... I just want the list under the particular header to slide, not all on the page...

    Can anyone help me to explain the best way of doing it?

    Many thanks!!

  2. #2
    SitePoint Enthusiast aldomatic's Avatar
    Join Date
    Dec 2006
    Location
    Big D
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    $("h3").click(function(){
    $(this).next('ul').slideToggle('slow').sibilings('ul:visible').slideUp('fast');
    });

  3. #3
    SitePoint Evangelist
    Join Date
    Nov 2005
    Posts
    496
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's wicked mate. Cheers!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •