使用 javascript 展开整个手风琴

Question

I am trying to incorporate a button that expands all of my accordion at once. I have tried the following but the button does not do anything. Any help would be appreciated as I cannot find the error.

I am trying to use the following button:

<button id="toggleAccordions" class="btn btn-primary" type="button" data-toggle="collapse">Open / Close</button>

To expand all aspects of the following accordion:

<div id="a1" role="tablist" class="accordion extend-right0">
    <div class="card">
        <div class="card-header" role="tab" id="a12010~2019heading">
            <h3 class="card-title">
                <a class="collapsed" data-toggle="collapse" href="#a12010~2019" aria-expanded="true" aria-controls="a12010~2019">
                    <div class="container"><span></span>2010~2019</div>
                </a>
            </h3>
        </div>
        <div id="a12010~2019" class="collapse show" role="tabpanel" aria-labelledby="a12010~2019heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2010~2012</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>Name</td>
                                <td>Ph.D</td>
                                <td>20</td>
                            </tr>
                        </tbody>
                    </table>
                    <h4>2012~2014</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" role="tab" id="a12000~2009heading">
            <h3 class="card-title">
                <a class="collapsed" data-toggle="collapse" href="#a12000~2009" aria-expanded="false" aria-controls="a12000~2009">
                    <div class="container"><span></span>2000~2009</div>
                </a>
            </h3>
        </div>
        <div id="a12000~2009" class="collapse" role="tabpanel" aria-labelledby="a12000~2009heading" data-parent="#a1">
            <div class="card-body">
                <div class="container">
                    <h4>2000~2001</h4>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col"></th>
                                <th scope="col">Position</th>
                                <th scope="col">Name</th>
                                <th scope="col">Programme</th>
                                <th scope="col">Graduation</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row"></th>
                                <td>President</td>
                                <td>name</td>
                                <td>Ph.D.</td>
                                <td>9 </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
    </div>
</div>

Using the following js, but it does not expand:

$(function() {
$('#toggleAccordions').on('click', function(e) {

$('.accordion .collapse').toggleClass('show');
})
});

Answer 1

I see no issue with the code, I have prepared a small demo.

Edit: The issue was with loading jquery after the js function being executed. Making jquery load before the function execution worked.

 $(function() { $('#toggleAccordions').on('click', function(e) { $('.accordion.collapse').toggleClass('show'); }) });

 .collapse { display: none; }.collapse.show { display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="toggleAccordions" class="btn btn-primary" type="button" data-toggle="collapse">Open / Close</button> <div id="a1" role="tablist" class="accordion extend-right0"> <div class="card"> <div class="card-header" role="tab" id="a12010~2019heading"> <h3 class="card-title"> <a class="collapsed" data-toggle="collapse" href="#a12010~2019" aria-expanded="true" aria-controls="a12010~2019"> <div class="container"><span></span>2010~2019</div> </a> </h3> </div> <div id="a12010~2019" class="collapse" role="tabpanel" aria-labelledby="a12010~2019heading" data-parent="#a1"> <div class="card-body"> <div class="container"> <h4>2010~2012</h4> <table class="table table-hover"> <thead> <tr> <th scope="col"></th> <th scope="col">Position</th> <th scope="col">Name</th> <th scope="col">Programme</th> <th scope="col">Graduation</th> </tr> </thead> <tbody> <tr> <th scope="row"></th> <td>President</td> <td>Name</td> <td>Ph.D</td> <td>20</td> </tr> </tbody> </table> <h4>2012~2014</h4> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="a12000~2009heading"> <h3 class="card-title"> <a class="collapse" data-toggle="collapse" href="#a12000~2009" aria-expanded="false" aria-controls="a12000~2009"> <div class="container"><span></span>2000~2009</div> </a> </h3> </div> <div id="a12000~2009" class="collapse" role="tabpanel" aria-labelledby="a12000~2009heading" data-parent="#a1"> <div class="card-body"> <div class="container"> <h4>2000~2001</h4> <table class="table table-hover"> <thead> <tr> <th scope="col"></th> <th scope="col">Position</th> <th scope="col">Name</th> <th scope="col">Programme</th> <th scope="col">Graduation</th> </tr> </thead> <tbody> <tr> <th scope="row"></th> <td>President</td> <td>name</td> <td>Ph.D.</td> <td>9 </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="card"> </div> </div>