accordion with up and down arrow is not working accordingly

Question

the following code is not working the second time when I click on accordion. the up and down arrows in accordion not working accordingly.

<script type="text/javascript">

    $('.panel-collapse').on('hide.bs.collapse', function () {
        debugger;
        $(this).siblings('.panel-heading').removeClass('active');
    });
    $('.panel-collapse').on('show.bs.collapse', function () {
        debugger;
        $(this).siblings('.panel-heading').addClass('active');
    });

https://codepen.io/nhembram/pen/XKEJJp

the same iam trying to implement in project but arrows are not working

Answer 1

As per link of codepen.io which you have provided. The transition of icon is handled by CSS.

Could you please share more details may be in your project the CSS is getting overwrite by another CSS, as your script looks fine, but need to understand, what you are using in project. So I could help you.

Meanwhile you can also have a look on below code may this can help you.

 function toggleIcon(e) { $(e.target).prev('.panel-heading').find(".more-less").toggleClass('glyphicon-menu-down glyphicon-menu-up'); } $('.panel-group').on('hidden.bs.collapse', toggleIcon); $('.panel-group').on('shown.bs.collapse', toggleIcon);

 . .panel-group.panel { border-radius: 0; box-shadow: none; border-color: #EEEEEE; }.panel-default >.panel-heading { padding: 0; border-radius: 0; color: #212121; background-color: #FAFAFA; border-color: #EEEEEE; }.panel-title { font-size: 14px; }.panel-title > a { display: block; padding: 15px; text-decoration: none; }.more-less { float: right; color: #212121; }.panel-default >.panel-heading +.panel-collapse >.panel-body { border-top-color: #EEEEEE; } /* ----- v CAN BE DELETED v ----- */ body { background-color: #26a69a; }.demo { padding-top: 60px; padding-bottom: 110px; }.demo-footer { position: fixed; bottom: 0; width: 100%; padding: 15px; background-color: #212121; text-align: center; }.demo-footer > a { text-decoration: none; font-weight: bold; font-size: 14px; color: #fff; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width: initial-scale=1"> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <i class="more-less glyphicon glyphicon-menu-down"></i> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> panel body elements should be added here </div> </div> </div> </div> </div> </body> </html>

accordion with up and down arrow is not working accordingly

Question

1 answers

solution1
2 2021-05-25 06:52:34

accordion with up and down arrow is not working accordingly

Question

1 answers

solution1 2 2021-05-25 06:52:34

solution1
2 2021-05-25 06:52:34