collapse and expand tabs jquery / simple accordion

I have two different methods for simple accordion; 1st with close button, 2nd is with hover trigger.

1) Here is JsFiddle example with close button:

jQuery:

$('.content').slideUp(400);//reset panels

$('.panel').click(function() {//open
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('#'+takeID+'C').slideDown(400);
                             //show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
   var takeID = $(this).attr('id').replace('Close','');
   //strip close from id = 1second
    $('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});​

html:

<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
  <span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
  <span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
  <span id="panel3Close">X</span>
</div>

——-


2) Here is JsFiddle example with hover trigger:

$('.panel').hover(function() {
   var takeID = $(this).attr('id');//takes id from clicked ele
   $('.content').stop(false,true).slideUp(400);//close
   //used stop for prevent conflict
   $('#'+takeID+'C').stop(false,true).slideDown(400);//open
   //show's clicked ele's id macthed div
});​

Leave a Comment