Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<div id="accordion1" class="accordion">
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" href="#group1" data-parent="#accordion1" data-toggle="collapse">
<span>Groupe One</span>
</a>
</div>
<div id="group1" class="accordion-body collapse in">
<div class="accordion-inner">
Lorem Ipsum
</div>
</div>
</div>
<div class="accordion-group accordion-caret">
<div class="accordion-heading">
<a class="accordion-toggle" href="#group2" data-parent="#accordion1" data-toggle="collapse">
<span>Groupe One</span>
</a>
</div>
<div id="group2" class="accordion-body collapse">
<div class="accordion-inner">
Lorem Ipsum
</div>
</div>
</div>
</div>
CSS
.accordion-caret .accordion-toggle:hover {
text-decoration:none;
}
.accordion-caret .accordion-toggle:hover span {
text-decoration:underline;
}
.accordion-caret .accordion-toggle:before {
font-family:FontAwesome;
font-size:16px;
margin-right:5px;
vertical-align:-1px;
}
.accordion-caret .accordion-toggle:not(.collapsed):before {
content:"\f0d7";
margin-left:0px;
}
.accordion-caret .accordion-toggle.collapsed:before {
content:"\f0da";
margin-left:5px;
}
/* LESS
.accordion-caret{
.accordion-toggle {
&:hover {
text-decoration: none;
span{
text-decoration: underline;
}
}
&:before {
font-family: "FontAwesome";
font-size: 16px;
margin-right: 5px;
vertical-align: -1px;
}
&:not(.collapsed):before{
content: "\f0d7";
margin-left: 2px;
}
&.collapsed:before {
content: "\f0da";
margin-left: 5px;
}
}