"Best Accordion"
Bootstrap 3.3.0 Snippet by Manasiroy

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> Accordion </title> <meta name="description" content=""> <meta name="viewport" content="width=device-width; initial-scale=1.0"> </head> <body> <div class="accordion"> <h4 class="accordion-toggle">Accordion 1</h4> <div class="accordion-content"> <p> Cras malesuada ultrices augue molestie risus. </p> </div> <h4 class="accordion-toggle">Accordion 2</h4> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet mauris eu turpis. </p> </div> <h4 class="accordion-toggle">Accordion 3</h4> <div class="accordion-content"> <p> Vivamus facilisisnibh scelerisque laoreet. </p> </div> </div> </body> </html>
.accordion{width:500px; margin: 0 auto;} .accordion-toggle {border-bottom: 1px solid #cccccc;cursor: pointer;margin: 0;padding: 10px 0;position: relative;} .accordion-toggle.active:after{content:"";position:absolute;right:0;top:17px;width:0;height:0;border-bottom:5px solid #f00;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);} .accordion-toggle:before{content:"";position:absolute;right:0;top:17px;width:0;height:0;border-top:5px solid #000;border-left:5px solid rgba(0,0,0,0);border-right:5px solid rgba(0,0,0,0);} .accordion-toggle.active:before{display:none;} .accordion-content {display: none;} .accordion-toggle.active {color: #ff0000;}
$(document).ready(function() { $('.accordion').find('.accordion-toggle').click(function() { $(this).next().slideToggle('600'); $(".accordion-content").not($(this).next()).slideUp('600'); }); $('.accordion-toggle').on('click', function() { $(this).toggleClass('active').siblings().removeClass('active'); }); });

Related: See More

Argon Design System
Tabs and accordion collaboration
Accordion Multi Level List Group Menu
Accordion Menu

Questions / Comments: