JavaScript Accordions

Each section contains a link and a some content. The content is hidden by default. When a link is clicked then the respective content is displayed.

CodePen

JavaScript

// **************************************************
//  Accordions
// **************************************************
const accordionExpand = () => {
    document.querySelectorAll('.accordion-item').forEach((element) => {
        const accordionTitle = element.querySelector('.accordion-title a');
        const accordionContent = element.querySelector('.accordion-content');

        accordionTitle.addEventListener('click', () => {
            accordionTitle.classList.toggle('expanded');
            accordionContent.classList.toggle('show');
        });
    });
}
accordionExpand();

HTML

<div class="content-accordion">
	<div class="accordion-item">
		<h2 class="accordion-title"><a href="#">Accordion Item 1</a></h2>
		<div class="accordion-content"><p>Lorem ipsum sed felis eget velit aliquet sagittis id. Aenean sed adipiscing diam donec adipiscing tristique. Arcu risus, quis varius quam quisque id diam vel. Eget lorem dolor, sed viverra ipsum nunc aliquet.</p></div>
	</div>

	<div class="accordion-item">
		<h2 class="accordion-title"><a href="#">Accordion Item 2</a></h2>
		<div class="accordion-content"><p>Lorem ipsum sed felis eget velit aliquet sagittis id. Aenean sed adipiscing diam donec adipiscing tristique. Arcu risus, quis varius quam quisque id diam vel. Eget lorem dolor, sed viverra ipsum nunc aliquet.</p></div>
	</div>
</div>

CSS

/* Accordions
============================================================ */
.content-accordion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25em;
    margin: 0 auto;
}

.accordion-item {

}

.accordion-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 2rem;

    a {
        background: #c3113b;
        display: block;
        padding: 0.75em 3em 0.75em 1em;
        position: relative;
        text-decoration: none;
        color: #fff;

        &:hover,
        &:focus {
            text-decoration: none;
        }

        &:after {
            content: "\f0fe";
            display: inline-block;
            position: absolute;
            right: 1.5%;
            transform: translateY(-50%);
            top: 50%;
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 2rem;
            color: #fff;
        }

        &.expanded:after {
            content: '\f146';
        }
    }
}

.accordion-content {
    display: none;
    padding: 0.75em 3em 0.75em 1em;

    &.show {
        display: block;
    }
}