I took some code snippets from a website and developed a shopping cart accordion module. The complete code is available on my CodePen profile, you can access it through this link:
http://codepen.io/applecool/pen/YXaJLa<div class="summary">
<button class="expand btn btn-lg">Collapse All for Summary</button>
</div>
The HTML snippet above includes a button named "Collapse All for Summary" at the bottom. This button's functionality is to toggle all the accordion tabs open or closed when clicked. When initially opening the page, the accordion tabs work smoothly. However, after implementing the toggle button feature using JavaScript, clicking on the tabs no longer functions as expected, likely due to CSS class changes.
Here is the JavaScript function I created for the toggle functionality:
$('.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'
});
}
});
Associated CSS rules for the script and button div:
.accordionItem.is-collapsed{
max-height: 0px;
}
Your assistance in resolving this issue would be greatly appreciated. Any suggestions or workarounds are welcome. Please help me identify and correct any mistakes I may have made. Thank you!
Best regards, .SH