javascript collapse expand need help!

[manilabox]

Hi I got this javascript code and able to use it in my project. If anyone can help me on this, I want to add a button when I click it will expand all. below is the code.

<script type="text/javascript">$(document).ready(function(){$('#promo-content')
.children('div:not(.promo)').hide().end()
.find('h3 a').click(function(){var $this=$(this);if($this.hasClass('collapse')){$this
.removeClass('collapse')
.addClass('expand')
.find('em').text('Read More').end()
.parent('h3').next('div:visible').slideUp('fast')
;}
else if($this.hasClass('expand')){$this
.removeClass('expand')
.addClass('collapse')
.find('em').text('Collapse').end()
.parent('h3').next('div:hidden').slideDown('fast')
;}
else{alert("no class");}})
;});</script>

and here is the html code


<div class="lcol" id="promo-content">

<h3><a class="collapse" href="javascript:void(0);"><b>Layers of Protection Analysis (LOPA)</b> <span><em>collapse</em></span></a></h3>

<div class="promo">
<p class="promo-content-title" id="promo-new">Paper 1<span></span></p>

<p class="style13">Layers Of Protection Analysis For Human Factors (LOPA-HF)</p>
<p>Process hazard analysis (PHA) performed to meet the requirements of OSHA and EPA
regulations must address Human factors. Both the human failures that can cause</p>

</div>


<h3><a class="expand" href="javascript:void(0);"><b>Software Promotions</b> <span><em>collapse</em></span></a></h3>
<div style="display: none; ">
<div class="promo2">
<p class="promo-content-title" id="promo-new"><span>Software Promotions 1M</span></p>
<p>Quam euimod sed, semper ut potenti pellentesque</p>
</div>
</div>

</div>

[SB65]

I've done something very similar on my site, using this approach:

<script type="text/javascript">$(document).ready(function(){
   $('#promo-content h3').click(function(event){//add a click event to the h3
          if(!event.detail || event.detail==1){//only fire on first click 
          $(this).next().slideToggle();//slide the following element
          $(this).toggleClass('active');//add a class so it can be identified
          $(this).find('span').text($(this).find('span').text() == 'expand' ? 'collapse' : 'expand');//toggle the label
          return false;
          }
   });
   
   $('#show-all').click(function(){
   		$('#promo-content h3:not(.active)').click();//expand everything that's not active on click
   });

   $('.promo').hide();//hide all the promos when the page loads
   $('#promo-content h3').removeClass('active').append(' <\span>expand<\/span>');//add the labels
   $('#promo-content h3:first').click();//show the first element
;});</script>



<div class="lcol" id="promo-content">

<h3 class="active">Layers of Protection Analysis (LOPA)</h3>

<div class="promo">
<p class="promo-content-title" id="promo-new">Paper 1<span></span></p>

<p class="style13">Layers Of Protection Analysis For Human Factors (LOPA-HF)</p>
<p>Process hazard analysis (PHA) performed to meet the requirements of OSHA and EPA
regulations must address Human factors. Both the human failures that can cause</p>

</div>


<h3 class="active">Software Promotions </h3>
<div class="promo">
<p class="promo-content-title" id="promo-new"><span>Software Promotions 1M</span></p>
<p>Quam euimod sed, semper ut potenti pellentesque</p>
</div>
</div>
<p id="show-all">Show all</p>

So when the page loads all the content is displayed, so it's still available to users who have js disabled. The script hides all the .promo content, adds a span to the heading to indicate that the .promo can be toggled, and a click handler. Then show the first set of content. This allows your html markup to be a bit cleaner as well.