I have successfully implemented a jQuery accordion script that functions as intended.
However, I am looking to enhance the functionality by making it so that the opened content can be closed on the second click.
You may have seen a similar behavior in the Bootstrap accordion here, but I cannot use this due to the dynamic nature of my menu and having only one 'ID'.
Unfortunately, my current script does not close the opened content like the Bootstrap example.
If you would like to see the code in action, you can check out this JSfiddle Link.
Do you have any suggestions on how I can achieve the smooth collapsing functionality of the Bootstrap accordion?
Here is a snippet of my HTML code:
<div id="wrapper">
<div class="accordionButton">monday</div>
<div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
<div class="accordionButton">tuesday</div>
<div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div>
<div class="accordionButton">wednesday</div>
<div class="accordionContent">sunny<br />more weather</div>
<div class="accordionButton">thursday</div>
<div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
</div>
Included below is the Javascript code for reference:
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
Any assistance or recommendations on improving this functionality would be greatly appreciated.