Bootstrap snippet: Acordion horizontal with arrows

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.



<!-- Font awesome --> <script src="https://use.fontawesome.com/cb2d0db4c2.js"></script> <div> <div class="container"> <div class="row"> <br> <br> <br> <div class="col-md-4 col-md-offset-3"> <div aria-multiselectable="true" class="panel-group" id="accordion" role="tablist"> <div class="panel panel-default"> <div class="panel-heading" id="headingOne" role="tab"> <h4 class="panel-title"> <a aria-controls="collapseOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" role="button"> <i class="fa fa-angle-down"> </i> Collapse 1 </a> </h4> </div> <div aria-labelledby="headingOne" class="panel-collapse collapse in" id="collapseOne" role="tabpanel"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 col-md-12"> <div class="thumbnail"> <img alt="..." src="http://www.fargom.com.mx/img/taza-cafe.jpg"> <div class="caption"> <h3 class="text-center"> Title </h3> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor. </p> <p class="text-center"> <a class="btn btn-default btn-circle thumbnail-facebook-btn" href="#"> <i class="fa fa-facebook "> </i> </a> <a class="btn btn-default btn-circle thumbnail-twitter-btn" href="#"> <i class="fa fa-twitter "> </i> </a> <a class="btn btn-default btn-circle thumbnail-linkedin-btn" href="#"> <i class="fa fa-linkedin "> </i> </a> </p> </div> </img> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" id="headingTwo" role="tab"> <h4 class="panel-title"> <a aria-controls="collapseTwo" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo" role="button"> <i class="fa fa-angle-down"> </i> Collapse 2 </a> </h4> </div> <div aria-labelledby="headingTwo" class="panel-collapse collapse" id="collapseTwo" role="tabpanel"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 col-md-12"> <div class="thumbnail"> <img alt="..." src="http://www.fargom.com.mx/img/taza-cafe.jpg"> <div class="caption"> <h3 class="text-center"> Title </h3> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor. </p> <p class="text-center"> <a class="btn btn-default btn-circle thumbnail-facebook-btn" href="#"> <i class="fa fa-facebook "> </i> </a> <a class="btn btn-default btn-circle thumbnail-twitter-btn" href="#"> <i class="fa fa-twitter "> </i> </a> <a class="btn btn-default btn-circle thumbnail-linkedin-btn" href="#"> <i class="fa fa-linkedin "> </i> </a> </p> </div> </img> </div> </div> </div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" id="headingThree" role="tab"> <h4 class="panel-title"> <a aria-controls="collapseThree" aria-expanded="false" class="collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapseThree" role="button"> <i class="fa fa-angle-down"> </i> Collpase 3 </a> </h4> </div> <div aria-labelledby="headingThree" class="panel-collapse collapse" id="collapseThree" role="tabpanel"> <div class="panel-body"> <div class="row"> <div class="col-sm-6 col-md-12"> <div class="thumbnail"> <img alt="..." src="http://www.fargom.com.mx/img/taza-cafe.jpg"> <div class="caption"> <h3 class="text-center"> Title </h3> <p> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor. </p> <p class="text-center"> <a class="btn btn-default btn-circle thumbnail-facebook-btn" href="#"> <i class="fa fa-facebook "> </i> </a> <a class="btn btn-default btn-circle thumbnail-twitter-btn" href="#"> <i class="fa fa-twitter "> </i> </a> <a class="btn btn-default btn-circle thumbnail-linkedin-btn" href="#"> <i class="fa fa-linkedin "> </i> </a> </p> </div> </img> </div> </div> </div> </div> </div> </div> </div> </div> </br> </br> </br> </div> </div> </div>
.panel-default{ border-radius: 10px; } .panel-default>.panel-heading{ background-color: #0072ff; border-bottom: 5px solid black; } .panel-title a{ text-decoration: none; color: white; } .pa1nel-title a:hover{ color: #ffa81c !important; text-decoration: none; } .panel-body{ background-color: gray; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.42; border-radius: 15px; color: black; } .thumbnail-facebook-btn{ background-color: #3B5998; color: white; } .thumbnail-twitter-btn{ background-color: #1DA1F2; color:white; } .thumbnail-linkedin-btn{ background-color: #2468A1; color:white; }
$(document).ready(function() { $('.collapse').on('show.bs.collapse', function() { $(this).parent().find('.fa-angle-down').removeClass('fa-angle-down').addClass('fa-angle-up'); }).on('hidden.bs.collapse', function() { $(this).parent().find('.fa-angle-up').removeClass('fa-angle-up').addClass('fa-angle-down'); }); });
chubureitor

Acordion horizontal with arrows

chubureitor
  Sep 5th, 10:45
64 Views