HTML markup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<div class="ct-accordionList"> <div id="accordion" role="tablist" aria-multiselectable="true" class="panel-group"> <div class="panel panel-default"> <div id="headingOne" role="tab" class="panel-heading"> <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">21<span>/aug</span></a></h4> </div> <div id="collapseOne" role="tabpanel" aria-labelledby="headingOne" class="panel-collapse collapse in"> <div class="panel-body">An evening with Frank<strong> “THE PIANO GUY” </strong>Sed ut perspiciatis, unde omnis iste natus. <div class="panel-button"><a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a></div> </div> </div> </div> <div class="panel panel-default"> <div id="headingTwo" role="tab" class="panel-heading"> <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="collapsed">27<span>/aug</span></a></h4> </div> <div id="collapseTwo" role="tabpanel" aria-labelledby="headingTwo" class="panel-collapse collapse"> <div class="panel-body">An evening with Frank<strong> “THE PIANO GUY” </strong>Sed ut perspiciatis, unde omnis iste natus. <div class="panel-button"><a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a></div> </div> </div> </div> <div class="panel panel-default"> <div id="headingThree" role="tab" class="panel-heading"> <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="collapsed">03<span>/sep</span></a></h4> </div> <div id="collapseThree" role="tabpanel" aria-labelledby="headingThree" class="panel-collapse collapse"> <div class="panel-body">An evening with Frank<strong> “THE PIANO GUY” </strong>Sed ut perspiciatis, unde omnis iste natus. <div class="panel-button"><a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a></div> </div> </div> </div> <div class="panel panel-default"> <div id="headingFour" role="tab" class="panel-heading"> <h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" class="collapsed">12<span>/sep</span></a></h4> </div> <div id="collapseFour" role="tabpanel" aria-labelledby="headingFour" class="panel-collapse collapse"> <div class="panel-body">An evening with Frank<strong> “THE PIANO GUY” </strong>Sed ut perspiciatis, unde omnis iste natus. <div class="panel-button"><a href="masterclass.html" class="btn btn-link btn-sm btn-border btn-border--white">learn more</a></div> </div> </div> </div> </div> </div> |
Screenshot