Focus – Hidden Elements

<div class="accordion-panel">
    <h2>
        <button class="collapsible" aria-controls="content1" aria-expanded="false" id="section_1">What's Pearson+?
            <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false">
                <rect class="vert" height="8" width="2" y="1" x="4" />
                <rect height="2" width="8" y="4" x="1" />
            </svg>
        </button>
    </h2>
    <div id="content1" class="accordion-content" role="region" aria-labelledby="section_1" aria-hidden="true" hidden>
        <p>
            Introducing Pearson+. Reimagined learning, designed for you.
            Choose from one eTextbook or over 1,500 eTextbooks and study
            tools, all in one place, for one low monthly subscription. A
            new way to buy books that fits your budget. Make the most of
            your study time with offline access, enhanced search, notes
            and flashcards — to get organized, get the work done quicker
            and get results. Plus, with the app, put textbooks in your
            pocket and learn wherever. It's time to upgrade the
            textbook and simplify learning, so you can have time to
            live too.
        </p>
    </div>
</div>
<div class="accordion-panel">
    <h2>
        <button class="collapsible" aria-controls="content2" aria-expanded="false" id="section_2">What's an eTextbook?
            <svg viewBox="0 0 10 10" aria-hidden="true" focusable="false">
                <rect class="vert" height="8" width="2" y="1" x="4" />
                <rect height="2" width="8" y="4" x="1" />
            </svg>
        </button>
    </h2>
    <div id="content2" class="accordion-content" role="region" aria-labelledby="section_2" aria-hidden="true" hidden>
        <p>
            eTextbook is an easy-to-use digital textbook available from
            Pearson+. Make it your own by adding notes and highlights.
            Download the Pearson+ mobile app to learn on the go, even
            offline. Listen on the go with our new audiobook feature,
            available for most titles.
        </p>
    </div>
</div>

.collapsible {
    color: rgb(0, 0, 0);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.accordion-content {
    padding: .5rem 1rem;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

[aria-expanded="true"] .vert {
    display: none;
}

button:focus svg {
    outline: 2px solid;
}

[aria-expanded] rect {
    fill: currentColor;
}

button svg {
    height: 1em;
    margin-left: 0.5em;
    float: right;
}

h2 {
    margin-bottom: 0;
}

:focus {
    outline: .10em solid #000000;
}

.accordion-panel {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    background-color: #fefefe;
    border-radius: 4px;
    transition: box-shadow .125s ease-in-out;
}

.accordion-panel:hover {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
}

.active {
    background-color: #007a9c;
    color: #fff;
}

let collapsible = document.getElementsByClassName("collapsible");
let i;

for (i = 0; i < collapsible.length; i++) {
    let section = collapsible[i];
    collapsible[i].addEventListener("click", function() {
        let aria=this.classList.toggle("active");
        if (aria) {
            section.setAttribute("aria-expanded", "true")
        } else {
            section.setAttribute("aria-expanded", "false")
        }
        const controlsId = section.getAttribute('aria-controls');
        let content = document.getElementById(controlsId);
        const isExpanded = section.getAttribute('aria-expanded') === 'true';
        if (!isExpanded){
            content.setAttribute('hidden', '');
            content.setAttribute("aria-hidden", "true")
        } else {
            content.removeAttribute('hidden');
            content.setAttribute("aria-hidden", "false")
        }
    });
}