Simple Vertical Accordion using jQuery.slideToggle()

http://talkerscode.com/webtricks/cool-vertical-accordian-menu-using-jquery-css-html.php

by Ram Tobolski

HTML

<h1>Accordian Menu Using jQuery And CSS</h1>
  <div>

    <li id="li-one" onclick="paragraph(this.id);">First Para Info</li>
    <p id="li-one-para">
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
    </p>
	
    <li id="li-two" onclick="paragraph(this.id);">Second Para Info</li>
    <p id="li-two-para">
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
    </p>

    <li id="li-third" onclick="paragraph(this.id);">Third Para Info</li>
    <p id="li-third-para">
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
    </p>

    <li id="li-fourth" onclick="paragraph(this.id);">Fourth Para Info</li>
    <p id="li-fourth-para">
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
      This is just an example of Simple Accordian
    </p>

  </div>

CSS

body
{
	background-color:#CED8F6;
	font-family:helvetica;
}
h1
{
	text-align:center;
	color:blue;
	margin-top:100px;
}
div
{
	margin:0px auto; 
	width:250px;
}	
div li
{
	background-color:#2E64FE;
	font-size:20px;
	color:white;
	padding:10px;
	cursor:pointer;
	border:1px solid #A4A4A4;
}
div p
{
	display:none;
	background-color:#F2F2F2;
	color:#585858;
	font-size:18px;
	margin:0px;
	padding:10px;
}

JavaScript

function paragraph(id)
    {
       $(".active").slideToggle();
        $("li + p").removeClass("active");
	   $("#"+id+"-para").slideToggle()
          .addClass("active");
    }