CODEWITHSUNDEEP
javascriptjquery
Cody
Cody

Reputation: 919

jquery Accordion change Text

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!

Upvotes: 0

Views: 975

Answers (2)

wadleo
wadleo

Reputation: 101

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>

Upvotes: 1

lzagkaretos
lzagkaretos

Reputation: 2910

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>

Upvotes: 1

Related Questions