Toggle divs using links
HTML
<div>
<div class="spoiler_toggle">
<div class="spoiler_bg">Body</div>
</div>
<a href="" class="spoiler_title">Title<div class="spoiler_indicator">↓</div></a>
</div>
CSS
.spoiler_indicator {
float: right;
}
.spoiler_title {
display:block;
background-color: red;
color: #fff;
padding: 10px 10px;
}
.spoiler_title.active {
background-color: blue;
}
.spoiler_toggle {
display:none;
}
.spoiler_bg {
background: green;
padding: 5px 5px;
}
JavaScript
$(document).ready(function(){
$('.spoiler_title').on('click', function(){
$('.spoiler_toggle').slideToggle(100, function() {
var visible = $(this).is(':visible');
$('.spoiler_indicator').html(visible ? '↑' : '↓');
});
$(this).toggleClass('active');
return false;
});
});