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>