Expand and collapse widget
The jQuery
$(document).ready(function() {
//Initially hide all the expandable content with class name "content"
$(".content").hide();
//Toggle the component when parent class "heading" is clicked on
$(".heading").click(function() {
var header = $(this);
//Toggle the arrow image based on whether the content <p> is expanded or not
header.children('#arrow').toggleClass('plus_sign minus_sign');
//Expand or collapse the content <p> with slide mode animation
header.next(".content").slideToggle(500);
});
});
The CSS
* {
margin: 0;
padding: 0;
background: transparent;
}
.layer {
width: 460px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.95em;
background-color: #fafafa;
}
.heading {
margin-top: 2px;
color: #fff;
padding: 5px 10px;
background: #B72A31;
}
.content {
padding: 10px;
}
h1 {
padding: 0 5px;
display: inline-block;
vertical-align: middle;
font-size: 1.2em;
}
.arrow {
width: 26px;
height: 26px;
display: inline-block;
vertical-align: middle;
}
.plus_sign {
background-image: url('images/plus_icon.png');
}
.minus_sign{
background-image: url('images/minus_icon.png');
}
The markup
<div class="heading">
<div id="arrow" class="arrow plus_sign"></div>
<h1>A Statement</h1>
</div>
<p class="content">The result of this aesthetic way of working is the original Artisan: Primarius'city bike. This bike combines classic shapes with modern design: A visual masterpiece con-taining DNA of authenticity, agility, finesse and crafts-manship. Primarius' Artisan proves that along with the perfection of the industrial revolution, we have also lost something substantial: authenticity.
</p>