This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
<ul id="accordion1" class="a11yAccordion a11yAccordion-light">
<li class="a11yAccordionItem">
<div class="a11yAccordionItemHeader">
Header #1
</div>
<div class="a11yAccordionHideArea">
First row content
</div>
</li>
<li class="a11yAccordionItem">
<div class="a11yAccordionItemHeader">
Header #2
</div>
<div class="a11yAccordionHideArea">
Second row content
</div>
</li>
<li class="a11yAccordionItem">
<div class="a11yAccordionItemHeader">
Header #3
</div>
<div class="a11yAccordionHideArea">
Third row content
</div>
</li>
</ul>
var myaccordion = new A11yAccordion({
parentSelector: '#accordion1'
});
parentSelector - selector for the parent container which has an accordion markup
speed - speed of animation
hiddenLinkDescription - description for every Show/Hide link for users who use Assistive technology (AT)
showSearch - boolean option which will tell accordion to render search options
showOne - boolean option which represents if accordion can uncollapse only 1 row to the user
overallSearch - boolean option which will tell search to look not only in headers but within collapsed areas as well
searchActionType - "hide" or "collapse". Hide option hides/shows rows based on the search results. Collapse option collapses/uncollapses rows
onAreaShow - custom callback which will be called after making visible an accordion's area. Argument is jQuery DOM element for an area to become shown
onAreaHide - user defined callback which will be called after hiding an accordion's area. Argument is jQuery DOM element for an area to become hidden
Function which will hide hidden area in the row with index = rowIndex
Function which will show hidden area in the row with index = rowIndex
Function which will hide or show hidden area in the row with index = rowIndex depending on its previous state
Function which will return a jQuery row element with index = rowIndex
Boolean value which will make accordion to show only 1 uncollapsed row at a time to the user if true
JQuery element which contains DOM markup of the a11yAccordion
This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
This link is also accessible only when the collapsible area is visible.These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.
These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.