HTML
<div id="accordion">
<section>
<a href="#first-section-content">First section text</a>
<p id="first-section-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum numquam reprehenderit repellat hic, officiis quos repellendus. Ad, adipisci nihil possimus modi odit ab sit natus! Accusantium quam, assumenda blanditiis ratione iure error odit, ducimus laudantium, magni earum possimus quos laboriosam sit non commodi culpa amet eveniet tenetur. Culpa, sunt, alias.
</p>
</section>
<section>
<a href="#second-section-content">Second section text</a>
<p id="second-section-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum numquam reprehenderit repellat hic, officiis quos repellendus. Ad, adipisci nihil possimus modi odit ab sit natus! Accusantium quam, assumenda blanditiis ratione iure error odit, ducimus laudantium, magni earum possimus quos laboriosam sit non commodi culpa amet eveniet tenetur. Culpa, sunt, alias.
</p>
</section>
<section>
<a href="#third-section-content">Third section text</a>
<p id="third-section-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum numquam reprehenderit repellat hic, officiis quos repellendus. Ad, adipisci nihil possimus modi odit ab sit natus! Accusantium quam, assumenda blanditiis ratione iure error odit, ducimus laudantium, magni earum possimus quos laboriosam sit non commodi culpa amet eveniet tenetur. Culpa, sunt, alias.
</p>
</section>
</div>
CSS
#accordion {
width: 80%;
margin: 2em auto;
background-color: #f8f8f8;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
#accordion section a {
padding: 1em;
text-decoration: none;
color: white;
background-color: #252831;
display: block;
border-bottom: 1px solid white;
}
#accordion section p {
padding: 0.5em 2em 1.5em;
}
JAVASCRIPT
$("#accordion section p").toggle();
$("#accordion section a").on("click", function() {
$("#accordion section p").slideUp(300);
var currentAttrValue = $(this).attr('href');
$(currentAttrValue).slideToggle(300);
});
