jQuery - Accessible Accordion v01

by freedawirl

HTML

<script src="http://anvk.github.io/a11yAccordion/js/a11yAccordion-0.3.1.min.js"></script>
<ul id="accordion1" class="a11yAccordion">
    <li class="a11yAccordionItem">
        <div class="a11yAccordionItemHeader">
             <h3>Overview of Services</h3>

        </div>
        <div class="a11yAccordionHideArea"></div>
    </li>
    <li class="a11yAccordionItem">
        <div class="a11yAccordionItemHeader">
             <h3>Introduction to MetroAccess</h3>

        </div>
        <div class="a11yAccordionHideArea"></div>
    </li>
    <li class="a11yAccordionItem">
        <div class="a11yAccordionItemHeader">
             <h3>Section 1: Eligibility &amp; Certification</h3>

        </div>
        <div class="a11yAccordionHideArea"></div>
    </li>
</ul>

CSS

/*! a11yAccordion 0.3.1 / Last build on: 10-06-2014 / This file is under 0.3.1 license. */
 .a11yAccordion .a11yAccordionSearchDiv {
    margin-left:auto;
    margin-right:auto;
    width:80%;
    text-align:right
}
.a11yAccordion .a11yAccordionSearchDiv .a11yAccordionSearch {
    background-image:url(../imgs/search.png);
    background-repeat:no-repeat;
    background-size:auto 80%;
    background-position:1% 15%;
    padding-left:1.4em;
    border-radius:1em;
    -moz-border-radius:1em;
    -webkit-border-radius:1em
}
.a11yAccordion .a11yAccordionItem, .a11yAccordion .a11yAccordionNoResultsItem {
    margin-left:auto;
    margin-right:auto;
    width:80%;
    border-bottom:1px dotted #c4c4c4;
    list-style-type:none
}
.a11yAccordion .a11yAccordionItem .a11yAccordionItemHeader, .a11yAccordion .a11yAccordionNoResultsItem .a11yAccordionItemHeader {
    cursor:pointer;
    padding:10px;
    overflow:auto
}
.a11yAccordion .a11yAccordionItem .a11yAccordionItemHeader h3 {
    display: inline-block;
    margin: 0;
}
.a11yAccordion .a11yAccordionItem .a11yAccordionItemHeader .a11yAccordionItemHeaderLink, .a11yAccordion .a11yAccordionNoResultsItem .a11yAccordionItemHeader .a11yAccordionItemHeaderLink {
    float:right
}
.a11yAccordion .a11yAccordionItem .a11yAccordionItemHeader .a11yAccordionItemHeaderLink .a11yAccordionItemHeaderLinkHiddenLabel, .a11yAccordion .a11yAccordionNoResultsItem .a11yAccordionItemHeader .a11yAccordionItemHeaderLink .a11yAccordionItemHeaderLinkHiddenLabel {
    left:-900px;
    top:-900px;
    position:absolute
}
.a11yAccordion .a11yAccordionItem .a11yAccordionHideArea, .a11yAccordion .a11yAccordionNoResultsItem .a11yAccordionHideArea {
    padding:20px;
}
.a11yAccordion .a11yAccordionItem .a11yAccordionHideArea.visiblea11yAccordionItem, .a11yAccordion .a11yAccordionNoResultsItem .a11yAccordionHideArea.visiblea11yAccordionItem {
}
.light-a11yAccordion-header {
    background-color:#ffffff;
    color:#261e14
}
.light-a11yAccordion-header a,...

JavaScript

$(function ($) {

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

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