<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);
