jQuery - Accessible Accordion v03

by freedawirl

HTML

<script src="http://anvk.github.io/a11yAccordion/js/a11yAccordion-0.3.1.min.js"></script>
<div id="intro">
<h2>MetroAccess<br/>
Riders’ Guide</h2>
<img src="/uploadedImages/Capmetroorg/Riders_Guide/MetroAccess/paratransit-images/section-image-MetroAccess-Vehicle-Operators-in-front-of-a-MetroAccess-bus.jpg" alt="section-image-MetroAccess-Vehicle-Operators-in-front-of-a-MetroAccess-bus" title="section-image-MetroAccess-Vehicle-Operators-in-front-of-a-MetroAccess-bus" />
</div>
<!-- End Intro --> 
<div id="MetroAccessContent">
<h2 id="toc">Table of Contents <span>Click on topic to expand</span></h2>
<ul id="accordion1" class="a11yAccordion">
    <li class="a11yAccordionItem">
        <div class="a11yAccordionItemHeader">
             <h3>Overview of Services</h3>

        </div>
        <div class="a11yAccordionHideArea">
            
            <img src="uploadedimages/Capmetroorg/Riders_Guide/MetroAccess/paratransit-images/Overview-section-MetroAccess-bus-crossing-bridge.jpg" alt="Image of a MetroAccess bus crossing a bridge" width="249" height="171" class="push-l" title="Image of a MetroAccess bus crossing a bridge" />
    <p>In order to receive services, all MetroAccess passengers must be certified through the in-person eligibility process outlined in this guide. Specific details on eligibility requirements and how to apply may be found in the Eligibility &amp; Certification portion of this guide.</p>
    <p>A person is likely to receive some level of paratransit service eligibility if his or her functional ability to use Capital Metro’s accessible fixed route services are impaired due—specifically—to a disability.</p>
    <p>Persons with disabilities who can reasonably use regular bus or rail service are expected to do so.</p>
    <p>MetroAccess is a shared-ride paratransit service providing origin-to-destination service for eligible passengers seven (7) days a week. ”Shared ride” means that multiple passengers may receive service on the same vehicle, at the...

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;
   ...

JavaScript

$(function ($) {

    var accordion = new A11yAccordion({
        parentSelector: '#accordion1',
        hiddenLinkDescription: 'this is a link that expands and colapses a row of content'
    });

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