Cacher is the code snippet organizer for pro developers

<div class="accordion">
 
    <ul>
        <li>
            <div class="accordion--header">
                <h2>This is the header 1</h2>
            </div>
            <p class="content">This is the content</p>
        </li>
        <li>
            <div class="accordion--header">
                <h2>This is the header 2</h2>
            </div>
            <p class="content">This is the content</p>
        </li>
        <li>
            <div class="accordion--header">
                <h2>This is the header 3</h2>
            </div>
            <p class="content">This is the content</p>
        </li>
        <li>
            <div class="accordion--header">
                <h2>This is the header 4</h2>
            </div>
            <p class="content">This is the content</p>
        </li>
 
    </ul>
 
 
</div>

(function($) {
 
    $('.accordion').find('.accordion--header').click(function () {
        $('.accordion--header').not($(this)).removeClass('open').next('p.content').slideUp(350);
 
        $(this).toggleClass('open');
        $(this).next('p.content').slideToggle(350);
    });
 
})(jQuery);

.accordion {
    max-width: 900px;
    margin: 0 auto;
    li {
        list-style-type: none;
        outline: 1px solid black;
        margin-bottom: 5px;
 
        .accordion--header {
 
            width: 100%;
 
            h2 {
                text-align: center;
                margin: 0;
            }
 
            &:hover {
                cursor: pointer;
            }
 
        }
        
        p.content {
            display: none;
        }
    }
}