A Pen by Andor Nagy.

index.html

<ul id="accordion">
	
	<!--Group one -->
	<li class="title">lable One</li>
	<li class="content">
		<h2>Duis eu enim turpis.</h2>
        	<p>Duis eu enim turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget lectus porttitor, dapibus mi porttitor, sollicitudin velit. Nam in sollicitudin tellus. Aliquam erat volutpat. Nunc pharetra ullamcorper pharetra. Pellentesque luctus lacus non pharetra consequat. Vivamus eget nisi venenatis, euismod lectus ut, sagittis ligula. Integer ultrices porta neque ut eleifend. In aliquet aliquam mauris, eu gravida massa vestibulum sed. Phasellus at nunc eu eros viverra placerat. Donec at sapien id augue tincidunt dapibus. Fusce elementum bibendum mollis. Praesent ac massa tempus, feugiat est ac, dapibus nunc. Vestibulum pulvinar tempus nunc, mattis pharetra dolor suscipit sed. Curabitur risus nibh, tempor in vehicula mattis, vulputate id ipsum.</p>
	</li>
	<!-- /Group one -->
	
	<!--Group Two -->
	<li class="title">lable Two</li>
	<li class="content">
		<h2>Interdum et malesuada fames ac ante ipsum primis in faucibus.</h2>
        	<p>Duis eu enim turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget lectus porttitor, dapibus mi porttitor, sollicitudin velit. Nam in sollicitudin tellus. Aliquam erat volutpat. Nunc pharetra ullamcorper pharetra. Pellentesque luctus lacus non pharetra consequat. Vivamus eget nisi venenatis, euismod lectus ut, sagittis ligula. Integer ultrices porta neque ut eleifend. In aliquet aliquam mauris, eu gravida massa vestibulum sed. Phasellus at nunc eu eros viverra placerat. Donec at sapien id augue tincidunt dapibus. Fusce elementum bibendum mollis. Praesent ac massa tempus, feugiat est ac, dapibus nunc. Vestibulum pulvinar tempus nunc, mattis pharetra dolor suscipit sed. Curabitur risus nibh, tempor in vehicula mattis, vulputate id ipsum.</p>
	</li>
	<!-- /Group Two -->
	
	<!--Group Three -->
	<li class="title">lable Three</li>
	<li class="content">
		<h2>Praesent fringilla vestibulum magna.</h2>
      		<p>Praesent fringilla vestibulum magna. Quisque posuere ac justo nec vestibulum. Cras pretium orci et lacus placerat, nec ultrices ipsum facilisis. Mauris ut est in mi hendrerit facilisis ut tristique velit. Vivamus vitae ullamcorper risus. Cras erat tortor, dapibus accumsan fringilla non, fermentum eu tellus. Quisque venenatis, lorem venenatis iaculis elementum, libero diam scelerisque mi, vel rhoncus nibh leo quis massa. Pellentesque a neque sit amet ante mattis imperdiet eget ut metus. Cras quam velit, ullamcorper molestie accumsan ac, porttitor ac quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nam id tellus risus. Morbi dapibus ipsum eu massa congue imperdiet. Sed et accumsan arcu, id lobortis nisl. Proin porttitor, libero ac rhoncus ullamcorper, orci libero tempus urna, non lacinia ipsum nulla sed sapien. Phasellus tempor vulputate pharetra.</p>
	</li>
	<!--Group Three -->
</ul>

script.js

$(document).ready(function() {
    $('#accordion li.content').filter(':nth-child(n+4)').addClass('hide');
	
	$('ul').on('click','li.title',function() {
		$(this).next().slideDown(200).siblings('li.content').slideUp(200);
		})
});

Simple-jQuery-Accordion.markdown

Simple jQuery Accordion

A Pen by Andor Nagy on CodePen.

License.

style.css

/* CSS Document */

body {
	font-family:Arial, Helvetica, sans-serif;
	line-height:1.3;
	background: #bdc3c7;
	}

h1 {
	font-size: 50px;
	text-align: center;
}	

#accordion {
	margin:100px auto;
	padding:0;
	max-width:1160px;
	}
	
#accordion li {
	list-style:none;
	}
	
#accordion li.content {
	margin:0;
	padding: 10px;
	border: 1px solid #efefef;
	background: #FFF;
	}
	
#accordion li.title {
	padding:10px;
	
	font-size:1.2em;
	line-height:2em;
	color:#FFF;
	
	background: #3498db;
	border-bottom: 1px solid #2980b9;
	}
	
#accordion .hide {
	display:none;
	}