Accordion

Accordions are pretty simple, especially if you just want one instead of a list. The .hide(); function can also be done in CSS by using the display property but I prefer to keep all the functionality in the JS and all the styling in the CSS.

<div class="accordion">
    <p class="accordion-header">Click me</p>
    <p class="accordion-inner">This content is nested inside the accordion. This content is nested inside the accordion. This content is nested inside the accordion.This content is nested inside the accordion. This content is nested inside the accordion. This content is nested inside the accordion.</p>
</div>

$('.accordion-inner').hide();
$('.accordion').click(function(){
    $(this).find('.accordion-inner').slideToggle();
    $(this).toggleClass('active');
});

Rendered Code

Click me

This content is nested inside the accordion. This content is nested inside the accordion. This content is nested inside the accordion.This content is nested inside the accordion. This content is nested inside the accordion. This content is nested inside the accordion.