HOW TO - jQuery Toggle Text View

Question

I have been working on a jQuery HTML CSS I have got most of the part right. What I want to do is when I click on the name the hidden text should slide down -- I got this to work. But I have 4-5 such names and when I click on the 2nd name the 1st one should hide back and so on

here is my code

 /*JQUERY CODE */

 jQuery(document).ready(function () {

jQuery('#toggle li').click(function () {

    var text = jQuery(this).children('div.slide');

    if (text.is(':hidden')) {
        text.slideDown('200');
        jQuery(this).children('span').html('-');
        jQuery(this).children('.selected').css('color','#a61607');
    } else {
        text.slideUp('200');
        jQuery(this).children('span').html('+');
        jQuery(this).children('.selected').css('color','#878484');      
    }

});

}); 

/* HTML CODE */

<ul id="toggle">
  <li>
    <h3 class="selected">TEST 1</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum.</p>
    </div>
  </li>
  <li>
    <h3 class="selected">TEST 2</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum..</p>
    </div>
  </li>
  <li>
    <h3 class="selected">TEST 3</h3>
    <span>+</span>
    <div class="slide">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet consequat sem, a venenatis purus mollis in. Mauris bibendum dui eget nunc sagittis sit amet placerat tortor euismod. Duis blandit urna in lorem venenatis condimentum.</p>
    </div>
  </li>
</ul>

Answer 1

I think this is the easiest (but maybe not so pretty) way to do this:

if(text.is(':hidden'))
{
    jQuery('#toggle li > div.slide:not(:hidden)').click();
    text.slideDown('200');
    jQuery(this).children('span').html('-');
    jQuery(this).children('.selected').css('color','#a61607');
}

Answer 2

quick solution:

jQuery(document).ready(function () {

jQuery('#toggle li').click(function () {
    $('.slide').slideUp('200');
    $('#toggle span').html('+');
    $('.selected').css('color','#878484');
    var text = jQuery(this).children('div.slide');

    if (text.is(':hidden')) {
        text.slideDown('200');
        jQuery(this).children('span').html('-');
        jQuery(this).children('.selected').css('color','#a61607');
    } 
});

}); 

Example: http://jsfiddle.net/Jznbh/

Answer 3

Add this line at the top of the jQuery('#toggle li').click() function:

jQuery(this).siblings().children('div.slide').slideUp();

This will slide an open div s up while the selected one slides down. You may also want to take a look at jQuery UI's accordion feature .