"Bootstrap Carousel with plus minus"
Bootstrap 3.2.0 Snippet by naveensaini

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,700,600,300' rel='stylesheet' type='text/css'> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="accordion-first" class="clearfix"> <div class="accordion" id="accordion2"> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> <em class="icon-fixed-width fa fa-plus"></em>Lorem Ipsum is fully responsive and perfectly fits on any Mobile device. </a> </div> <div style="height: 0px;" id="collapseOne" class="accordion-body collapse"> <div class="accordion-inner"> 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... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> <em class="icon-fixed-width fa fa-plus"></em>Lorem Ipsum is automatically creates retina ready images. </a> </div> <div style="height: 0px;" id="collapseTwo" class="accordion-body collapse"> <div class="accordion-inner"> 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... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree"> <em class="icon-fixed-width fa fa-plus"></em>Lorem Ipsum contains 365 Retina Ready Font Awesome icons. </a> </div> <div style="height: 0px;" id="collapseThree" class="accordion-body collapse"> <div class="accordion-inner"> 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... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour"> <em class="icon-fixed-width fa fa-plus"></em>Lorem Ipsum is Powerful Admin Panel </a> </div> <div style="height: 0px;" id="collapseFour" class="accordion-body collapse"> <div class="accordion-inner"> 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... </div> </div> </div> <div class="accordion-group"> <div class="accordion-heading"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseFive"> <em class="icon-fixed-width fa fa-plus"></em>Lorem Ipsum is unlimited color schemes </a> </div> <div style="height: 0px;" id="collapseFive" class="accordion-body collapse"> <div class="accordion-inner"> 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... </div> </div> </div> </div><!-- end accordion --> </div> </div> </div> </div>
body{font-family:'open sans';} #accordion-first .accordion-group { margin-bottom: 10px; } #accordion-first .accordion-heading, #accordion-first .accordion-toggle:hover, #accordion-first .accordion-heading .accordion-toggle.active { background: none repeat scroll 0% 0% transparent; } #accordion-first .accordion-heading { border-bottom: 0px none; font-size: 16px; } #accordion-first .accordion-heading .accordion-toggle { display: block; cursor: pointer; padding: 5px 0px !important; color: #222; outline: medium none !important; text-decoration: none; } #accordion-first .accordion-heading .accordion-toggle.active em{background-color: #F7C221;} #accordion-first .accordion-heading .accordion-toggle > em { background-color: #222; border-radius: 100px; color: #FFF; font-size: 14px; height: 32px; line-height: 32px; margin-right: 10px; text-align: center; width: 32px;}
(function($) { "use strict" // Accordion Toggle Items var iconOpen = 'fa fa-minus', iconClose = 'fa fa-plus'; $(document).on('show.bs.collapse hide.bs.collapse', '.accordion', function (e) { var $target = $(e.target) $target.siblings('.accordion-heading') .find('em').toggleClass(iconOpen + ' ' + iconClose); if(e.type == 'show') $target.prev('.accordion-heading').find('.accordion-toggle').addClass('active'); if(e.type == 'hide') $(this).find('.accordion-toggle').not($target).removeClass('active'); }); })(jQuery);

Related: See More


Questions / Comments:

I just fall in love with this snippet

moidul () - 5 years ago - Reply 0