Focus – Hidden Elements

<div class="accordion-panel">
    <h2>
        <button class="collapsible" aria-controls="content1" aria-expanded="false" id="section_1">What&#8217;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&#8217;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&#8217;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")
        }
    });
}