I have an accordion with 6 buttons (button class ".course-accordion") to expand or collapse.
Under the accordion I have a div ("collapse-bottom") that I would want hidden if all accordions are collapsed, but visible if 1 (or more) are open. This div contains a button to collapse all.
I've tried show/hide if the button class contains 'active', and I've tried to show/hide if the accordion content has a max-height of 0/100%. I can't seem to get it working.
Any ideas? jQuery or Javascript would be fine here.
Sample Code Markup:
<div class="course-wrapper">
<button class="course-accordion active">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<!-- I want this to be hidden unless one or all of the above accordions is active -->
<div class="expand-collapse">
<a class="collapse-bottom">Collapse All</a>
</div>
Here is just one example of some pseudo code (Sorry, been a while since I have written any JS or JQuery, so disregard if this doesn't help, but I figured maybe I could help get you on the right track), but this could be accomplished in many ways.
Keep track of the state of the Accordion by having a Counter that gets updated with the amount of Accordion Divs that have a class == "Active" every time one of the Accordion Buttons is clicked.
//Then "While" the counter is greater than or equal to 1, Show the Hide/ Display Button.
Hope that helps. Id be glad to write something out, but just wanted to give a quick and dirty implementation for you to get you started. But again, if you are looking for something more concrete then I am sure that either I, or someone else, would be happy to help you out.
You can use hasClass() to check if a certain element has a particular class.
This can be done using jquery:
<div class="course-wrapper">
<button class="course-accordion">Course 01</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 02</button>
<div class="course-panel">Course Content</div>
</div>
<div class="course-wrapper">
<button class="course-accordion">Course 03</button>
<div class="course-panel">Course Content</div>
</div>
<div class="expand-collapse">
<a href="#" class="collapse-bottom">Collapse All</a>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
function check_accord() {
//check if any button has class active and shows the collapse-bottom element
if ($(".course-accordion").hasClass("active")) {
$(".collapse-bottom").show();
} else {
$(".collapse-bottom").hide();
}
}
$(".course-accordion").click(function () {
//toggles the active class of the clicked button
$(this).toggleClass("active");
check_accord();
});
$(".collapse-bottom").click(function () {
//removes the active class from all the buttons when collapse bottom is clicked
$(".course-accordion").removeClass("active");
check_accord();
});
check_accord(); //executes the function each time the webpage is loaded
</script>