Accordeon with the first item opened
HTML
<div id="accordeon">
<h1 class="trigger trigger_active">click here to show next div</h1>
<div class="toggle_container" style="display:block">
<img src="http://www.beeldenstorm.org/2014/style/img/icons/mob_werkplaatsenondersteuning.svg">
<br/>text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show</div>
<h1 class="trigger">click here to show next div</h1>
<div class="toggle_container">
<img src="http://www.beeldenstorm.org/2014/style/img/icons/mob_werkplaatsenondersteuning.svg">
<br/>text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show</div>
<h1 class="trigger">click here to show next div</h1>
<div class="toggle_container">
<img src="http://www.beeldenstorm.org/2014/style/img/icons/mob_werkplaatsenondersteuning.svg">
<br/>text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to show text to...
CSS
h1 {
font-weight: bold;
cursor:pointer;
font-size: 1.5em
}
.toggle_container {
display: none;
}
JavaScript
$(function () {
$('.trigger').click(function (e) {
$('.trigger.trigger_active').toggleClass('trigger_active')
.next('.toggle_container')
.slideToggle('fast');
$(this).toggleClass('trigger_active')
.next('.toggle_container')
.slideToggle('fast');
e.preventDefault();
});
});