PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE

by Bunlong Heng

HTML

<br><br><br><br><br><br><br><br><br><br><br>
<div class="row sk-p">
  <div class="col-md-12">
    <div class="panel-group" id="accordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">

            PRE-REQUISITE(S) FOR ALL SKILLS IN EXERCISE

            <span  data-toggle="collapse" data-parent="#accordion" href="#sk-p-r" class="show-details-sk-p pull-right">
              <span class="show-details-txt-sk-p-r">SHOW DETAILS</span>
              <img width="20px" class="icon-sk-p-r-toggle" src="http://s6.postimg.org/bglqtob0d/plus.png">
            </span>

          </h4>
        </div>
        <div id="sk-p-r" class="panel-collapse collapse">
          <div class="panel-body">


           <div class="col-lg-6">
             <span>SOLVING EQUATIONS BY ADDITION OR SUBSTRACTION </span><br><br>
             <div class="sk-p-dash">
               <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
               <span>WATCH VIDEO</span><br><br>
               <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
               <span>REVIEW LESSON</span>
             </div>

           </div>


           <div class="col-lg-6">
             <span>GRAPHING INEQUALITIES IN ONE VARIABLE </span><br><br>
             <div class="sk-p-dash">
               <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/m4phsikzh/review_video.png">
               <span>WATCH VIDEO</span><br><br>
               <img width="20px" class="icon-sk-p-r" src="http://s6.postimg.org/6yjg1kuyl/review_pdf.png">
               <span>REVIEW LESSON</span>
             </div>

           </div>

         </div>
       </div>
     </div>

   </div>
 </div>
</div>

CSS

.sk-p-dash{
   padding-left: 25px;

 }

 .panel {
  border-radius: 0px !important;
}

.sk-p {
  margin-right: 16px;
  margin-left: 16px;
}

.panel-title, .panel-body {
  font-size: 10px;
}

.show-details-txt-sk-p-r{
  padding-right: 12px;
}

.show-details-sk-p {
  font-size: 9px;
  padding-right: 5px;
}

.show-details-sk-p .icon-sk-p-r-toggle {
  margin-top: -5px;
}

JavaScript

$(".show-details-sk-p").click(function () {
     $(".show-details-txt-sk-p-r").text("HIDE DETAILS");
     $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");
 });