I reused some of the code from a site and made a shopping cart accordion module. I have the whole code as a pen on codepen.
Here is the link for the pen: http://codepen.io/applecool/pen/YXaJLa
<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
HTML for button above : I added a button at the bottom called as "Collapse All for Summary". The purpose of this button: When a user clicks on the button, it should open all the accordion tabs and when clicked on it again, should close the accordion tabs. [i.e., a typical toggle functionality].
I wrote a small javascript function to make the accordion tabs toggle but it is very buggy. It does the job perfectly but the problem is, once I click on the button, the general click on the tab doesn't work. i.e., when you open up the codepen and click on the accordion tab, it smoothly opens up and closes. But after adding the toggle button functionality, you fire up the page, click on the "Collapse All for Summary" button, the accordion tabs work fine. Now, when you try to click on any of the closed or opened accordion tabs, the tab neither opens nor closes. I think the problem is definitely with the changing of classes which I am doing in the javascript with the CSS.
Script:
$('.expand').click(function(){
if($('.accordionItem.is-collapsed').css('max-height')== '0px'){
$('.accordionItem.is-collapsed').css({
'max-height': '900px'
});
}else if($('.accordionItem.is-collapsed').css('max-height')== '900px'){
$('.accordionItem.is-collapsed').css({
'max-height': '0px'
});
}
});
CSS specific to the above script and the button div:
.accordionItem.is-collapsed{
max-height: 0px;
}
Any help on this would be hugely appreciated. If there is any work around, I can gladly follow that too. Please let me know what idiotic mistake I am doing here. :)
Thank you.
Cheers, .SH
