Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia.

Nulla auctor eleifend turpis consequat pharetra: Vestibulum sit amet ipsum lacus… Nulla vel magna sit — amet dui lobortis commodo — vitae vel nulla.

Curabitur consectetur faucibus nisl ac varius. Curabitur consectetur; faucibus nisl ac varius. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Nulla auctor eleifend turpis consequat pharetra. Suspendisse potenti H₂0. Suspendisse potenti.

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Nunc iaculis risus vel ‘Orci Ornare’ dignissim sed vitae nulla. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Fusce ac sodales magna. Nulla auctor eleifend 23^rd of May turpis consequat pharetra. Suspendisse potenti H₂0.

Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Fusce ac sodales magna. Nulla auctor eleifend of May turpis consequat pharetra. Suspendisse potenti. Nunc iaculis risus vel ‘Orci Ornare’ dignissim sed vitae nulla.

<div class="a11y-drawers js-a11y-drawers">

    <h2 class="a11y-drawer-toggle js-a11y-drawer-toggle">Headline One</h2>
    <div class="a11y-drawer-panel">
        <p>Aliquam tincidunt velit sit amet...</p>
    </div>

    <h2 class="a11y-drawer-toggle js-a11y-drawer-toggle">Headline Two</h2>
    <div class="a11y-drawer-panel">
        <p>Potenti et eros sed justo...</p>
    </div>

    <h2 class="a11y-drawer-toggle js-a11y-drawer-toggle">Headline Three</h2>
    <div class="a11y-drawer-panel">
        <p>Sed dapibus, lectus sit amet...</p>
    </div>

</div>

$accordion-margin: 20px auto; // exterior margin
$accordion-rule-color: solid;
$accordion-rule-style: #ccc;
$accordion-rule-width: 1px;
$accordion-background: #fff;
$accordion-color: $text;

$accordion-header-icon-width: 20px;
$accordion-header-icon-height: 20px;
$accordion-header-icon-offset: 8px; // right alignment is possible with formula calc(100% - 28px)
$accordion-header-margin: 0;
$accordion-header-padding: 10px 20px 10px 44px;
$accordion-header-font-style: normal;
$accordion-header-font-weight: 400;
$accordion-header-font-size: 16px;
$accordion-header-line-height: 24px;
$accordion-header-font-face: $font-special;

$accordion-panel-padding: 0 20px 20px 44px;
$accordion-panel-font-style: normal;
$accordion-panel-font-weight: 400;
$accordion-panel-font-size: 14px;
$accordion-panel-line-height: 24px;
$accordion-panel-font-face: $font-special;

.a11y-drawers {
    clear: both;
    box-sizing: border-box;
    border-bottom: $accordion-rule-style $accordion-rule-width $accordion-rule-color;
    max-width: 100%;
    margin: $accordion-margin;
    padding: 0;
    .a11y-drawers {
        // nested accordion
        margin-bottom: 0;
    }
}

/* Accordion Drawer Header / Toggle */
.a11y-drawers .a11y-drawer-toggle {
    display: block;
    box-sizing: border-box;
    border-top: $accordion-rule-style $accordion-rule-width $accordion-rule-color;
    margin: 0;
    padding: 0;
    background: $accordion-background;
    color: $accordion-color;
}
.a11y-drawers .a11y-drawer-toggle button {
    box-sizing: border-box;
    border: 0;
    display: block;
    width: 100%;
    margin: 0;
    padding: $accordion-header-padding;
    background: $accordion-background;
    color: $accordion-color;
    font-style: $accordion-header-font-style;
    font-weight: $accordion-header-font-weight;
    font-size: $accordion-header-font-size;
    line-height: $accordion-header-line-height;
    font-family: $accordion-header-font-face;
    text-align: left;
    position: relative;
}
.a11y-drawers .a11y-drawer-toggle button:focus {
    outline: dotted 1px;
    outline-offset: -2px;
}
.a11y-drawers .a11y-drawer-toggle [aria-expanded]:before {
    position: absolute;
    left: $accordion-header-icon-offset;
    color: $text;
    content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAALGPC/xhBQAAAEVJREFUOBFjYCACKCkp/QdhIpQyMBGjiBQ1owaSElrY1Y7AMGQkNsFiDzFMUaqHIaYVWERGsx6WQEEIUT1SRg1EBC65LAD9Pwcd9fEfZgAAAABJRU5ErkJggg=='); // this is a plus sign
    width: $accordion-header-icon-width;
    height: $accordion-header-icon-height;
    margin: 1px 0 0 0;
    transition: transform ease-in-out .2s;
}
.a11y-drawers .a11y-drawer-toggle [aria-expanded="true"]:before {
    transform: rotate(45deg); // rotate the plus sign into an X
}

/* Accordion Drawer Panel Visibility */
.a11y-drawers .a11y-drawer-toggle + [aria-hidden] {
    display: none;
}

/* Accordion Drawer Panel */
.a11y-drawers .a11y-drawer-panel {
    padding: $accordion-panel-padding;
    background: $accordion-background;
    color: $accordion-color;
    font-style: $accordion-panel-font-style;
    font-weight: $accordion-panel-font-weight;
    font-size: $accordion-panel-font-size;
    line-height: $accordion-panel-line-height;
    font-family: $accordion-panel-font-face;
}
.a11y-drawers .a11y-drawer-panel p {
    margin: 0;
    padding: 0;
}
.a11y-drawers .a11y-drawer-panel p + p {
    margin-top: 8px;
}

This is in:
\Mobile\Scripts\Common\CrateAccessibility.js

Stand Alone Version for Pages that Don't Reference the Above File
(e.g. CMS pages possibly? TBD)

$('.js-a11y-drawers .js-a11y-drawer-toggle').each(function() {

    var $this = $(this);

    // create unique id for a11y relationship
    var id = 'js-a11y-drawer-' + $this.index();

    // wrap the content and make it focusable
    $this.nextUntil('.js-a11y-drawer-toggle').wrapAll('<div id="' + id + '" aria-hidden="true" class="a11y-drawer-wrap">');
    var panel = $this.next();

    // Add the button inside the <h2> so both the heading and button semanics are read
    $this.wrapInner('<button aria-expanded="false" aria-controls="' + id + '">');
    var button = $this.children('button');

    // Toggle the state properties
    button.on('click', function() {
        var state = $(this).attr('aria-expanded') === 'false' ? true : false;
        $(this).attr('aria-expanded', state);
        panel.attr('aria-hidden', !state);
        panel.slideToggle();
    });

});