HOW TO - jQuery Toggle Text View
===

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>