CODEWITHSUNDEEP
javascriptjqueryaccordion
Christopher
Christopher

Reputation: 41

How to show/hide div based on dynamic button state

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>

Upvotes: 1

Views: 872

Answers (2)

mani-hash
mani-hash

Reputation: 784

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>

Upvotes: 2

DP3PO
DP3PO

Reputation: 71

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.

Upvotes: 2

Related Questions