I am writing a custom accordion. On page load the accordion must be compressed.

I am writing a custom accordion. On page load the accordion must be compressed.

//On click there should be only one body of clicked li must be visible. When I re-click on the open 'li' it should be //closed and nothing else should open.

$(document).ready(function(){
$('.content .part').hide();
var id='l';
var count=0;
$('.content .close').each(function(){
//$(this).addClass('close');
   var iden = id + count;
   //alert('iden is:' +iden);
   $(this).attr('id',iden);
   //a=iden;
   //alert($(this).find('h3').html());
   //alert($(this).attr('id'));
   count++;
});

                            $('.content li').click(function()
{

                                         $('.content li').each(function(){
if($(this).hasClass('open'))
{
$(this).removeClass('open');
$(this).parent().find('div').hide('slow');
$(this).addClass('close');
// $('.content .open').click(function(){
// //$(this).parent().find('div').hide('slow');
// //$(this).addClass('close');
// alert('hello');
// });
}

                                    if($(this).hasClass('close'))
{
$(this).removeClass('close');
$(this).parent().find('div').show('slow');
$(this).addClass('open');
alert($(this).attr('class'));
}

});


//My html looks like this

<?php

  $html .=
"<div class='content'>
<li class='close'><h3 class='a'>$title</h3><p class='view'><b>view more</b></p></li>
<div class='part'>
 <ul>
<span class='img'>$img</span>
<span class='desc'><p>$description</p></span><br>
<span class='link'><p>$readmore</p></span>
</ul>
</div>
</div>";
?>