HOW TO - jQuery Toggle Text View

[Da 0wner]

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 onhere is my code\[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'); }});}); \[/code\]/* HTML CODE */\[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>\[/code\]