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
});