<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-md-12"> <div class="trs-acc mB5"> <div class="sec pad10 active"> <div class="trs-acc-hdg lite-greyBg "> <span class="webfwd logo pad5 mR20 bg-white"><img src="/resources/default/img/bluebook_logo.png" width="172" height="54"></span> <spoan>Standard Webforwarding</spoan> </div> <div id="w_default" class="trs-acc-bdy bdrB"> This is the test </div> </div> </div> <div class="trs-acc mB5"> <div class="sec pad10"> <div class="trs-acc-hdg lite-greyBg "> <span class="webfwd logo pad5 mR20 bg-white"><img src="/resources/default/img/bluebook_logo.png" width="172" height="54"></span> <spoan>Blue Book </spoan> </div> <div id="w_default" class="trs-acc-bdy bdrB"> This is the test </div> </div> </div> <div class="trs-acc mB5"> <div class="sec pad10"> <div class="trs-acc-hdg lite-greyBg "> <span class="webfwd logo pad5 mR20 bg-white"><img src="/resources/default/img/bluebook_logo.png" width="172" height="54"></span> <spoan>Houzz</spoan> </div> <div id="w_default" class="trs-acc-bdy bdrB"> This is the test </div> </div> </div> </div> </div> </div>

.lite-greyBg {background: #EFEFEF;} .bg-white {background: white;} .pad20 {padding: 20px} .pad10 {padding: 10px} .pad5 {padding: 5px} .mR20 {margin-right: 20px} .mB5 {margin-bottom: 5px} .bdr {border: thin solid #EFEFEF} .bdrB {border-bottom: thin solid #EFEFEF} .trs-acc-hdg {cursor: pointer} .trs-acc-hdg .logo{display: inline-block; padding: 5px; border: thin solid white}

/*------- Custom Accordion ---------------- */ //hide the all of the element with class trs-acc-bdy $(".trs-acc-bdy").hide(); $(".trs-acc-hdg").append( '<i class="reveal pull-right fa fa-angle-down pad20"></i>'); //toggle the componenet with class msg_body $(".trs-acc-hdg").click(function(e){ e.preventDefault(); $(".trs-acc-bdy").hide('slow'); $(this).next(".trs-acc-bdy").slideToggle(800); $(this).next('i.reveal').removeClass('fa-angle-down'); }); $(".active .trs-acc-bdy").show();