Create an Accordion Using HTML and CSS Only

Accordions are a great way to group and condense large amounts of information that pertain to the same subject. For example, you could use an accordion for FAQs. Typically, JS makes it very easy by allowing you to change the element classes on click, which then triggers specific styles. However, some CMSs will strip JS or script tags from their WYSIWYG editors. In this case, we can build it using only HTML and CSS.

Lorem Ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Pretium fusce?

Elementum facilisis leo vel fringilla est. Tempor orci dapibus ultrices in iaculis nunc sed augue. Bibendum enim facilisis gravida neque. Dui id ornare arcu odio. Suspendisse sed nisi lacus sed viverra tellus in hac habitasse. Lectus proin nibh nisl condimentum. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Eget egestas purus viverra accumsan in. Et netus et malesuada fames ac. Orci sagittis eu volutpat odio. Egestas sed sed risus pretium quam. Suspendisse sed nisi lacus sed.

How does this accordion work?

Well, you can continue reading below for the details and view the code that makes it tick afterward.

So, what we're doing here is grouping things together inside a couple of <div> tags, the "accordion" and "section" tags specifically. Those are mostly there for style purposes. The real functionality comes from using the <a> tage and setting it's href attribute to javascript:void(0);. When clicking on the anchor, the anchor receives the :focus pseudo-class.

The <div> right after the anchor can now be targeted. To start, we want that div to have a max-height of 0 and hide any overflow. This will make it "disappear". When its sibling anchor is clicked, we can then set its max-height to a very high number (as long as it's high enough to fit all of its content) by targeting via the a:focus + div CSS selector. This causes the clicked accordion element to expand.

<div class="accordion">
    <div class="section">
        <a href="javascript:void(0);">Accordion heading goes here.</a>
        <div>
            <p>Accordion content goes here.</p>
        </div>
    </div>
</div>
<style>
    .accordion .section {
        margin-bottom: 10px;
    }

    .accordion .section a {
        display: block;
        background-color: #80D060;
        color: #fff;
        padding: 10px;
        text-decoration: none;
        font-weight: bold;
    }

    .accordion .section a:hover {
        background-color: #80D060CC;
        cursor: pointer;
    }

    .accordion .section a+div {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .accordion .section a:focus+div {
        max-height: 500px;
    }
</style>

Click here to learn more about javascript:void(0); on freecodecamp.org.

Timothy's Dev Stuff

Create an Accordion Using HTML and CSS Only