<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="templates">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Trees
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Nullam feugiat volutpat nisl sed lobortis. Sed posuere accumsan orci; ut scelerisque quam suscipit venenatis. Etiam vel commodo nunc. Morbi sed tempor eros, eget aliquet ante. Cras at purus velit. Pellentesque id ligula consequat, rhoncus ipsum eget, bibendum urna. Curabitur dapibus egestas accumsan? Nullam placerat sem non est pharetra venenatis. Quisque vehicula, arcu ac consequat tempor, lectus sem tempor nisi, non congue dolor diam sed est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque et turpis luctus, dictum urna ut, consequat lorem.</p>
<p>Cras molestie congue porta. Curabitur hendrerit tristique lobortis! Vivamus faucibus eget urna non fermentum. Vestibulum vestibulum tellus turpis, ac consectetur est pulvinar sit amet. Curabitur in erat in lectus interdum accumsan. Nullam egestas dignissim ipsum vitae pulvinar. Vivamus congue accumsan quam, id gravida ante vestibulum quis! Duis pulvinar neque purus, ac vehicula tellus tincidunt sit amet. In condimentum felis et eros suscipit, at ornare metus imperdiet. Aliquam ullamcorper fermentum dolor, nec sodales enim dapibus quis. Nam dictum convallis dui a porta?</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Tools
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Nullam feugiat volutpat nisl sed lobortis. Sed posuere accumsan orci; ut scelerisque quam suscipit venenatis. Etiam vel commodo nunc. Morbi sed tempor eros, eget aliquet ante. Cras at purus velit. Pellentesque id ligula consequat, rhoncus ipsum eget, bibendum urna. Curabitur dapibus egestas accumsan? Nullam placerat sem non est pharetra venenatis. Quisque vehicula, arcu ac consequat tempor, lectus sem tempor nisi, non congue dolor diam sed est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque et turpis luctus, dictum urna ut, consequat lorem.</p>
<p>Cras molestie congue porta. Curabitur hendrerit tristique lobortis! Vivamus faucibus eget urna non fermentum. Vestibulum vestibulum tellus turpis, ac consectetur est pulvinar sit amet. Curabitur in erat in lectus interdum accumsan. Nullam egestas dignissim ipsum vitae pulvinar. Vivamus congue accumsan quam, id gravida ante vestibulum quis! Duis pulvinar neque purus, ac vehicula tellus tincidunt sit amet. In condimentum felis et eros suscipit, at ornare metus imperdiet. Aliquam ullamcorper fermentum dolor, nec sodales enim dapibus quis. Nam dictum convallis dui a porta?</p>
</div>
</div>
</div>
</div>
</div>
.accordion-group{
border: 0px solid #000000;
-moz-border-radius: 0px;/*Firefox*/
-webkit-border-radius: 0px;/*Safari, Chrome*/
border-radius: 0px;
background-color: #fff;
}
.accordion-heading .accordion-toggle{
color: #ddd;
font-family: 'Oxygen', sans-serif;
}
.accordion-heading{
background-color: rgba(59,101,161,1);
}
.accordion-heading:hover{
background-color: rgba(59,101,161,0.8);
}
.accordion-heading .accordion-toggle:hover{
text-decoration: none;
}
.accordion-inner{
border-color: #ddd;
}
