www.webdeveloper.com
Results 1 to 2 of 2

Thread: jquery accordion toggle question

  1. #1
    Join Date
    Dec 2010
    Posts
    9

    Question jquery accordion toggle question

    I have a jQuery accordion that I have partially working. As of right now, I have it so all my paragraphs are hidden on page load & when a header is clicked, the paragraph is displayed but only one at a time. That part is working fine. But I cannot figure out how to also have the ability to close up all the paragraphs on another header click?
    HTML
    Code:
        <div id="list">
          <h2>Heading #1</h2>
          <p>Here is some text</p>
          <h2>Heading #2</h2>
          <p>Here is more text</p>
          <h2>Heading #3</h2>
          <p>And here is even more text</p>
        </div>
    jQuery
    Code:
     
    $(document).ready(function() {					
    	$('h2').click(function() {				
    		$('p').slideUp('slow');			
    		$(this).next().slideDown('slow');		
    	});											
    	$("p").hide();						
    });

  2. #2
    Join Date
    Dec 2010
    Posts
    9

    Thumbs up Problem Solved

    I figured it out....by this code:

    Code:
    $(document).ready(function(){							
    	$("p").hide();										
    	$("h2").click(function(){							
    	  $(this).next("p").slideToggle("slow")				
     	  .siblings("p:visible").slideUp("slow"); 			
    	  $(this).siblings("h2").slideDown("slow");			
    	});
    });
    Now I just need to figure out how to implement the autoHeight feature & get a better animation transition & I'll be good to go!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles