How to get an accordian to open up one at a time
I've got an accordion that I'm trying to create so far I've only got 1 accordion open and the rest closed but when I click on another title then the other 3 open up.
- $('.panel-title a').click(function(){
$('.panel-collapse').each(function(){
$( this ).toggleClass( "in" );
});
});
this is my html
- <div class="panel-heading">
<h4 class="panel-title">
Lorem ipsum
</h4>
<div class="panel-collapse collapse in ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus tempus nisl, et consequat massa scelerisque ut. Vestibulum justo quam, ullamcorper et feugiat quis, ultrices eu felis. Suspendisse pharetra vehicula neque, maximus scelerisque quam pellentesque at. Aenean porttitor ligula quam, sit amet molestie odio dignissim vitae. Curabitur rutrum nisl a mauris facilisis, id sodales risus laoreet. Pellentesque vitae blandit est. Integer venenatis turpis vitae diam laoreet fringilla. Duis nec ipsum vitae leo ullamcorper laoreet at sed metus.
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
Lorem ipsum
</h4>
<div class="panel-collapse collapse ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus tempus nisl, et consequat massa scelerisque ut. Vestibulum justo quam, ullamcorper et feugiat quis, ultrices eu felis. Suspendisse pharetra vehicula neque, maximus scelerisque quam pellentesque at. Aenean porttitor ligula quam, sit amet molestie odio dignissim vitae. Curabitur rutrum nisl a mauris facilisis, id sodales risus laoreet. Pellentesque vitae blandit est. Integer venenatis turpis vitae diam laoreet fringilla. Duis nec ipsum vitae leo ullamcorper laoreet at sed metus.
</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
Lorem ipsum
</h4>
<div class="panel-collapse collapse ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rhoncus tempus nisl, et consequat massa scelerisque ut. Vestibulum justo quam, ullamcorper et feugiat quis, ultrices eu felis. Suspendisse pharetra vehicula neque, maximus scelerisque quam pellentesque at. Aenean porttitor ligula quam, sit amet molestie odio dignissim vitae. Curabitur rutrum nisl a mauris facilisis, id sodales risus laoreet. Pellentesque vitae blandit est. Integer venenatis turpis vitae diam laoreet fringilla. Duis nec ipsum vitae leo ullamcorper laoreet at sed metus.
</div>
</div>