jquery Accordion change Text

Question

what I try is to have a simple Accordion that changes it text before you open it, it displays show credits and when it's open the text should change to close credits does someone knows how to do it? saw it on some sites and I wonder how to do it in jquery

     <!-- credits -->
    <div class="credits">
        <a class="show-credits" data-toggle="collapse" href="#credits" role="button"
           aria-expanded="false" aria-controls="collapseExample">
            Show Credits
        </a>
        <div class="collapse" id="credits">
            <div class="card card-body">
                <div class="credits-body">Credits text .....
                </div>
            </div>
        </div>
    </div>
    <!-- /. credits -->

Thanks!

Answer 1

You can use accordionbeforeactivate event as:

$( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) {
  // 
} );

Below you can find a simple demo:

 $(function(){ $( "#accordion" ).accordion(); $( "#accordion" ).on( "accordionbeforeactivate", function( event, ui ) { var oldHeaderText = ui.oldHeader.text() var newHeaderText = ui.newHeader.text() ui.oldHeader.text(oldHeaderText.replace(' - Open', '')); ui.newHeader.text(newHeaderText + ' - Open'); } ); });

 <html> <head> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-2.0.3.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>Section 1 - Open</h3> <div> <p> Paragraph 1 </p> </div> <h3>Section 2</h3> <div> <p> Paragraph 2 </p> </div> </div> </body> </html>

Answer 2

Here is an example of what you wish to do https://codepen.io/wadleo/pen/mzMgpL

I used bootstrap and listen to its events on accordion open and close with jquery. Have fun.

https://codepen.io/wadleo/pen/mzMgpL

 $(function() { $("#paperback").on("hide.bs.collapse", function(){ $(".pp-but").html('Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span>'); }); $("#paperback").on("show.bs.collapse", function(){ $(".pp-but").html('Paperback Open <span class="pull-right"><i class="fa fa-minus"></i></span>'); }); });

 span, p { line-height: 1.2; font-family: Perpetua, sans-serif!important; } a { color: black; font-size: 15px; font-family: Perpetua, sans-serif!important; } a:hover { text-decoration: none; } .btn-theme { padding: 10px 20px; font-size: 15px; background: white; border-radius: 0px; border: solid 2px #FF7F50; transition-duration: 0.4s; -webkit-transition-duration: 0.4s; } .btn-theme:hover { background-color: #FF7F50; color: white; } .book-adds { margin-top: 5%; } .book-adds span { width: 50%; } .book-adds-cont { width: 200px; height: 35px; padding: 8px; display: block; border-radius: 5px; margin-bottom: 5%; border: 1px solid black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> <div class="col-xs-6 book-adds"> <span type="button" class="pp-but" data-toggle="collapse" data-target="#paperback">Paperback Close <span class="pull-right"><i class="fa fa-plus"></i></span> </span> <br> <span id="paperback" class="collapse"> <a class="btn btn-theme" href="">Buy</a> </span> <br> </div>

jquery Accordion change Text

Question

2 answers

solution1
1 2018-10-13 10:36:11

solution2
1 ACCPTED

jquery Accordion change Text

Question

2 answers

solution1 1 2018-10-13 10:36:11

solution2 1 ACCPTED

solution1
1 2018-10-13 10:36:11

solution2
1 ACCPTED