How to show/hide div based on dynamic button state-CodePudding

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 >
<button >Course 01</button>
<div >Course Content</div>
</div>

<div >
<button >Course 02</button>
<div >Course Content</div>
</div>

<div >
<button >Course 03</button>
<div >Course Content</div>
</div>

<!-- I want this to be hidden unless one or all of the above accordions is active -->
<div >
    <a >Collapse All</a>
</div>

CodePudding user response：

You can use hasClass() to check if a certain element has a particular class.

This can be done using jquery:

<div >
    <button >Course 01</button>
    <div >Course Content</div>
</div>

<div >
    <button >Course 02</button>
    <div >Course Content</div>
</div>

<div >
    <button >Course 03</button>
    <div >Course Content</div>
</div>

<div >
    <a href="#" >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>

CodePudding user response：

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.