CMTA Real Estate - Accessibile Accordion

by freedawirl

HTML

<script src="//www.capmetro.org/js/a11yAccordion-0.3.1.min.js"></script>
<link rel="stylesheet" href="//www.capmetro.org/css/a11yAccordion.css">
<ul id="accordion1" class="a11yAccordion">
    <!-- Section 1 -->
    <li class="a11yAccordionItem" id="accordion1-row-0">
        <div class="a11yAccordionItemHeader light-a11yAccordion-header">

            <h3 class="a11yAccordionItemHeaderText">
                License Agreement Installations within Capital Metro right-of-way</h3>

                <a href="#" class="a11yAccordionItemHeaderLink"><span class="a11yAccordionItemHeaderLinkShowLabel" style="display: inline;">Show</span><span style="display: none;" class="a11yAccordionItemHeaderLinkHideLabel">Hide</span><span class="a11yAccordionItemHeaderLinkHiddenLabel">this is some row with data in first accordion</span></a>
        </div>
        <div class="a11yAccordionHideArea light-a11yAccordion-area" style="display: none;">
            Content
        </div>
    </li>
    <!-- Section 2 -->
    <li class="a11yAccordionItem" id="accordion1-row-1">
        <div class="a11yAccordionItemHeader light-a11yAccordion-header">

            <h3 class="a11yAccordionItemHeaderText">
            Introduction to MetroAccess</h3>
            <a href="#" class="a11yAccordionItemHeaderLink"><span class="a11yAccordionItemHeaderLinkShowLabel">Show</span><span style="display: none;" class="a11yAccordionItemHeaderLinkHideLabel">Hide</span><span class="a11yAccordionItemHeaderLinkHiddenLabel">this is some row with data in first accordion</span></a>
        </div>
        <div class="a11yAccordionHideArea light-a11yAccordion-area" style="display: none;">
            Content
        </div>
    </li>
    <!-- Section 3 -->
    <li class="a11yAccordionItem" id="accordion1-row-2">
        <div class="a11yAccordionItemHeader light-a11yAccordion-header">

            <h3 class="a11yAccordionItemHeaderText">Section 1: Eligibility &amp; Certification</h3>
            <a href="#"...

JavaScript

$(function($) {

       var accordion = new A11yAccordion({
         parentSelector: '#accordion1',
         hiddenLinkDescription: 'this is some row with data in first accordion'
       });

       //accordion.uncollapseRow(2);
     });