"bootstrap collaps on click change heading text "
Bootstrap 3.0.0 Snippet by manojmann143

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="middle-inner-block"> <div class="quizlist-middle-block"> <div id="hques-tabs" class="home-question-tabs"> <div class="top-qlist-srchbar hidden"> <div class="serh-list"> <form id="qlist-srch-form" role="search" class="navbar-form qlist-srch-form"> <div class="input-group add-on"> <input id="srch-term" name="srch-term" placeholder="Search for Past Questions" class="form-control" type="text"> <div class="input-group-btn"> <button type="submit" class="btn btn-default qlist-srch-btn"><i class="fa fa-search fa-2x"></i></button> </div> </div> </form> </div> </div> <div id="qlist-contant" class="qlist"> <div class="ques-list-container mar-top20"> <form method="get" action="" id="form-quiz"> <ul id="main-q-list" class=" list-unstyled main-question-list"> <li> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad0"> <div class="main-question-heading check-ans-option"> <h4>1. What is the matter in the most solid state the matter in the most solid state?</h4> <div class="select-ans-option"> <div class="subcat-solu-ans"> <h4>E = MC2</h4></div> <div class="subcat-solu-ans-text"> <div class="subcat-ansshow-btn"> <a href="#sb1" data-toggle="collapse" class="" aria-expanded="true"><h4 class="text-green">Show Answer</h4></a> </div> <div class="subcat-solu-ans-img collapse in" id="sb1" aria-expanded="true" style=""> <img src="imgs/solution-3.jpg" class="img-responsive"> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad0"> <div class="main-question-heading pad-top15"> <h4>2. What is the matter in the most solid state the matter in the most solid state?</h4> <div class="select-ans-option check-ans-option"> <div class="subcat-solu-ans hidden"> <h4>E = MC</h4></div> <div class="subcat-solu-ans-text"> <div class="subcat-ansshow-btn"> <a href="#sb2" data-toggle="collapse"><h4 class="text-green">Show Answer</h4></a> </div> <div class="subcat-solu-ans-img collapse" id="sb2"> <iframe src="//docs.google.com/viewer?url=http://www.finmock.com/demo/pdf/2012/social-studies.pdf&hl=en_US&embedded=true" class="gde-frame" style="width:100%; height:700px; border: none;" scrolling="no"></iframe><p class="gde-text"> </p> <p> </p> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad0"> <div class="main-question-heading pad-top15"> <h4>3. What is the matter in the most solid state the matter in the most solid state?</h4> <div class="select-ans-option check-ans-option"> <div class="subcat-solu-ans"> <h4>E = MC2</h4></div> <div class="subcat-solu-ans-text"> <div class="subcat-ansshow-btn"> <a href="#sb3" data-toggle="collapse"><h4 class="text-green">Show Answer</h4></a> </div> <div class="subcat-solu-ans-img collapse" id="sb3"> <iframe src="https://www.youtube.com/embed/clB31p7iPXg" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad0"> <div class="main-question-heading pad-top15"> <h4>4. What is the matter in the most solid state the matter in the most solid state?</h4> <div class="select-ans-option check-ans-option"> <div class="subcat-solu-ans "> <h4>E = MC</h4></div> <div class="subcat-solu-ans-text"> <div class="subcat-ansshow-btn"> <a href="#sb4" data-toggle="collapse"><h4 class="text-green">Show Answer</h4></a> </div> <div class="subcat-solu-ans-img collapse" id="sb4"> <iframe src="//docs.google.com/viewer?url=http://www.finmock.com/demo/pdf/2012/social-studies.pdf&hl=en_US&embedded=true" class="gde-frame" style="width:100%; height:700px; border: none;" scrolling="no"></iframe><p class="gde-text"> </p><p> </p> <!--<object data="pdf/2012/social-studies.pdf" type="application/pdf" width="100%" height="300px"> </object>--> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> <li> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 pad0"> <div class="main-question-heading pad-top15"> <h4>5. What is the matter in the most solid state the matter in the most solid state? </h4> <div class="select-ans-option check-ans-option"> <div class="subcat-solu-ans"> <h4>E = MC2</h4></div> <div class="subcat-solu-ans-text"> <div class="subcat-ansshow-btn"> <a href="#sb5" data-toggle="collapse"><h4 class="text-green">Show Answer</h4></a> </div> <div class="subcat-solu-ans-img collapse" id="sb5"> <p> <br> <strong>Abstract </strong><br> </p><p> Over a period of more than 30 years, more than 100 mathematicians worked on a project to classify mathematical objects known as finite simple groups. The Classification, when officially declared completed in 1981, ranged between 300 and 500 articles and ran somewhere between 5,000 and 10,000 journal pages. </p> <p> Mathematicians have hailed the project as one of the greatest mathematical achievements of the 20th century, and it surpasses, both in scale and scope, any other mathematical proof of the 20th century. The history of the Classification points to the importance of face-to-face interaction and close teaching relationships in the production and transformation of theoretical knowledge. </p> </div> </div> </div> </div> </div> <div class="clearfix"></div> </li> </ul> </form> <div class="next-btn-section"> <div class="next-btn text-center mar-top50"> <a class="btn btn-default btn-custom-light" href="javascript:void(0);" id="status"> Next <i class="fa fa-arrow-right"></i></a> </div> </div> </div> <div class="clearfix"></div> <div class="qlist-ads"> <div class="list-ads-banner"> <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script> <!-- NetGen --> <ins data-ad-format="auto" data-ad-slot="8423038440" data-ad-client="ca-pub-7575473480795172" style="display:block" class="adsbygoogle"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div><!--/.tab-pane --> </div><!--/.tab-content --> </div> </div> </div> </div>
$(document).ready(function () { $('.subcat-ansshow-btn a').click(function() { $('.subcat-solu-ans-img').hasClass('collapse').html("Show Answer"); if ( $('.subcat-solu-ans-img').is('in')){ $('.subcat-ansshow-btn h4').html("Show Answer"); }else{ $('.subcat-ansshow-btn h4').html("Hide Answer"); } }) });

Related: See More


Questions / Comments: