This illustrates how we can apply styles independent of a specific DOM structure.

Same classes, different elements

<!-- FAQ -->
<div id="faq" class="accordion">
    <div class="separator">
        <h3 class="accordion__title">
            <a href="#faq-content1">FAQ Question 1</a>
        </h3>
        <div class="accordion__body" id="faq-content1">FAQ Answer 1</div>
    </div>
        <div class="separator">
        <h3 class="accordion__title">
            <a href="#faq-content2">FAQ Question 2</a>
        </h3>
        <div class="accordion__body" id="faq-content2">FAQ Answer 2</div>
    </div>
</div>


<!-- Archive -->
<ul id="archive" class="accordion">
    <li class="separator">
        <h4 class="accordion__title">
            <a href="#archive-content1">Month 1</a>
        </h4>
        <ul class="accordion__body" id="archive-content1">
            <li><a href="#">Blog Post Title 1</a></li>
            <li><a href="#">Blog Post Title 2</a></li>
        </ul>
    </li>
    <li class="separator">
        <h4 class="accordion__title">
            <a href="#archive-content2">Month 2</a>
        </h4>
        <ul class="accordion__body" id="archive-content2">
            <li><a href="#">Blog Post Title 1</a></li>
            <li><a href="#">Blog Post Title 2</a></li>
        </ul>
    </li>
</ul>