CodePen

HTML

            
              <ul id="toggle-view">
						<li>
							<h5 class="close">Title 1</h5>
							<div class="panel">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
							</div>
						</li>
						<li>
							<h5 class="close">Title 2</h5>
							<div class="panel">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
							</div>
						</li>
						<li>
							<h5 class="close">Title 3</h5>
							<div class="panel">
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
							</div>
						</li>
					</ul>
            
          
!

CSS

            
              
#toggle-view li {
  list-style: none;
	position:relative;
	cursor:pointer;
	margin-bottom:12px;	
}

#toggle-view li h5{
    padding:10px 10px;
	border:1px solid #eee;
}

.close {
  	background:#fbfbfb url('http://cdn1.iconfinder.com/data/icons/basicset/plus_16.png') no-repeat center right;
}

.open {
  	background:#C7C7C7 url('http://cdn1.iconfinder.com/data/icons/splashyIcons/remove_minus_sign.png') no-repeat center right;
}

#toggle-view .panel {
	padding:10px;
	display:none;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Toggle
$(document).ready(function () {
  $('#toggle-view li').click(function () {
    var $this = $(this),
        text = $this.children('div.panel'),
        $header = $this.find('h5');
    if (text.is(':hidden')) {
	    text.slideDown('200');
	    $header.addClass('open');
      $header.removeClass('close');
    } else {
	    text.slideUp('200');
	    $header.removeClass('open');
      $header.addClass('close');
    }
  });
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................