access-nyc-patterns

<!DOCTYPE html> <html class="bg-color-white text-size-0" lang="en"> <head> <meta charset="utf-8" /> <meta content="IE=edge" http-equiv="X-UA-Compatible" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <link href="images/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57" /> <link href="images/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60" /> <link href="images/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72" /> <link href="images/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76" /> <link href="images/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114" /> <link href="images/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="images/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144" /> <link href="images/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="images/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <link href="images/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png" /> <link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" /> <link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" /> <link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" /> <meta content="#112E51" name="msapplication-TileColor" /> <meta content="images/ms-icon-144x144.png" name="msapplication-TileImage" /> <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> <link href="styles/site-default.css" rel="stylesheet" /> <title>Accordion | ACCESS NYC Patterns</title><noscript> <style> body { visibility: visible !important; } </style> </noscript> <script type="text/javascript"> function load() { document.body.style.visibility = 'visible' }; </script> </head> <body class="bg-color-blue-dark" onload="load()" style="visibility: hidden;"><a class="sr-only" href="#main-content">Skip to main content</a> <div class="bg-color-white"> <header class="color-light-background px-2"> <div class="border-b border-color-grey-light"> <div class="flex items-center justify-between p-2 screen-tablet:py-4 screen-tablet:px-2"> <div> <h1 class="m-0 p-0 leading-normal"><a href="index"><span class="hidden">ACCESS NYC</span><svg aria-hidden="true" class="icon-logo-mark screen-tablet:hidden"> <use xlink:href="#icon-logo-mark"></use> </svg><svg aria-hidden="true" class="icon-logo-full--large text-color-blue-dark hidden screen-tablet:inline-block"> <use xlink:href="#icon-logo-full"></use> </svg></a></h1> </div> <div class="flex items-center"> <h2 class="text-font-size-small m-0 text-color-blue-dark screen-tablet:hidden">Patterns</h2> <h2 aria-hidden="true" class="type-h1 m-0 text-color-blue-dark hidden screen-tablet:inline-block">Patterns</h2> <nav class="text-font-size-small"><a class="rounded-lg text-color-blue-dark border-2 no-underline px-1 ml-2 hidden screen-tablet:inline-block" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><a aria-hidden="true" class="ml-1 screen-tablet:ml-2 screen-tablet:hidden" href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0">0.8.0</a><button aria-controls="main-menu" aria-expanded="false" class="btn-link ml-1 screen-tablet:ml-2" data-js="toggle" id="main-menu-control">Menu</button></nav> </div> </div> </div> </header> <aside aria-hidden="true" aria-labelledby="main-menu-control" class="color-mid-background text-font-size-small hidden hidden:overflowFadeInUp animated relative" id="main-menu" role="region" style="top: -1px"> <div class="page-wrapper py-4 animated"> <div class="screen-tablet:flex"> <nav class="screen-tablet:flex-1 mb-1 px-2"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="index">Home</a><a class="block p-1" href="about">About</a><a class="block p-1" href="installation">Installation</a><a class="block p-1" href="design-tools">Design Tools</a><a class="block p-1 screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="developer-tools">Developer Tools</a><a class="block p-1" href="https://www.npmjs.com/package/access-nyc-patterns">NPM</a><a class="block p-1" href="https://github.com/CityOfNewYork/access-nyc-patterns">GitHub</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Elements</span><a class="block p-1" href="buttons">Buttons</a><a class="block p-1" href="checkboxes">Checkboxes</a><a class="block p-1" href="dividers">Dividers</a><a class="block p-1" href="inputs">Inputs</a><a class="block p-1" href="layouts">Layouts</a><a class="block p-1" href="links">Links</a><a class="block p-1" href="lists">Lists</a><a class="block p-1" href="nav">Nav</a><a class="block p-1" href="program-labels">Program Labels</a><a class="block p-1" href="radios">Radios</a><a class="block p-1" href="tables">Tables</a><a class="block p-1" href="tooltips">Tooltips</a><a class="block p-1" href="toggles">Toggles</a><a class="block p-1" href="selects">Selects</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Components</span><a class="block p-1" href="accordion">Accordion</a><a class="block p-1" href="alert-box">Alert Box</a><a class="block p-1" href="alert-banner">Alert Banner</a><a class="block p-1" href="card">Card</a><a class="block p-1" href="checklist">Checklist</a><a class="block p-1" href="disclaimer">Disclaimer</a><a class="block p-1" href="filter">Filter</a><a class="block p-1" href="header">Header</a><a class="block p-1" href="member-list">Member List</a><a class="block p-1" href="nearby-stops">Nearby Stops</a><a class="block p-1" href="share-form">Share Form</a><a class="block p-1" href="side-nav">Side Nav</a><a class="block p-1" href="text-controller">Text Controller</a><a class="block p-1" href="question">Question</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><span class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1">Objects</span><a class="block p-1" href="announcements">Announcements</a><a class="block p-1" href="banner">Banner</a><a class="block p-1" href="card-list">Card Lists</a><a class="block p-1" href="content">Content</a><a class="block p-1" href="footer">Footer</a><a class="block p-1" href="formstack">Formstack</a><a class="block p-1" href="mobile-nav">Mobile Nav</a><a class="block p-1" href="navigation">Navigation</a><a class="block p-1" href="newsletter">Newsletter</a><a class="block p-1" href="search-box">Search Box</a></nav> <nav class="screen-tablet:flex-1 mb-1 px-2 screen-desktop:pl-4"><a class="type-h3 text-font-size-small mb-1 block screen-tablet:border-b screen-tablet:pb-2 screen-tablet:mb-1 border-color-white p-1" href="utility">Utilities</a><a class="block p-1" href="accessibility">Accessibility</a><a class="block p-1" href="colors">Colors</a><a class="block p-1" href="cookie">Cookie</a><a class="block p-1" href="font">Fonts</a><a class="block p-1" href="icons">Icons</a><a class="block p-1" href="inherit">Inherit</a><a class="block p-1" href="language">Language</a><a class="block p-1" href="media">Media</a><a class="block p-1" href="text">Text</a><a class="block p-1" href="toggle">Toggle</a><a class="block p-1" href="typography">Typography</a></nav> </div> <div class="text-center"><button aria-controls="main-menu" aria-expanded="false" class="btn-link" data-js="toggle">Close Menu</button></div> </div> </aside> <main class="color-light-background pt-4" id="main-content"> <article class="pt-4"> <header class="page-wrapper px-2 screen-desktop:px-0 layout--home-body"> <div class="my-0 w-full"> <h1 class="text-color-blue-dark px-2 pb-4 mb-4">Accordion</h1> </div> </header> <section class="pb-4 mb-4"> <div class="page-wrapper px-2"> <header class="layout--home-body"> <div class="my-0 px-2 pt-1 pb-4 border-b border-color-grey-light"> <div> <p class="text-font-size-small m-0">Source: <code><a href="https://github.com/CityOfNewYork/access-nyc-patterns/tree/v0.8.0/src/components/accordion">src/components/accordion/accordion</a></code></p> </div> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><p>The Accordion Component is a block of content with a header. With JavaScript enabled, the Accordion Component will toggle open or closed using the <a href="/toggle">Toggle JavaScript Utility</a>. All of the same accessible attribute toggling functionality the <a href="/toggle">Toggle Utility</a> provides will apply (<code>aria-controls</code>, <code>aria-expanded</code>, and <code>aria-hidden</code>). Without JavaScript enabled or within print views, it will remain open.</p> <p>When implementing a set of accordions stacked on top of each other, the first accordion should be open when the user lands on the page. Additionally, opening one accordion does not automatically close the other accordions.</p></div> </div> <div class="layout--gutter screen-tablet:layout--columns justify-between pt-4"> <div class="screen-tablet:pr-2"> <article class="c-accordion"> <header class="c-accordion__header color-dark-background"> <p id="aria-lb-what-you-need-to-include"><span>Free tax prep for New Yorkers</span><em class="block font-normal">NYC Free Tax Prep</em></p><button aria-controls="aria-c-what-you-need-to-include" aria-expanded="true" class="c-accordion__toggle print:hidden active" data-js="accordion"><span class="c-accordion__toggle-active">hide this list</span><span class="c-accordion__toggle-inactive">show this list</span></button> </header> <div aria-hidden="false" aria-labelledby="aria-lb-what-you-need-to-include" class="c-accordion__body color-mid-background print:active hidden:overflow animated active" id="aria-c-what-you-need-to-include" role="region"> <div class="c-accordion__padding"> <p class="text-color-blue">NYC Department of Consumer Affairs</p> <p>If you earned $64,000 or less last tax year, the City can help you file your taxes for free. You can file online or, if you make under $54,000, you can file in person.</p> <h4>Apply in person</h4> <p>There are more than 200 NYC Free Tax Prep sites in all five boroughs that can help you file for free.</p> <p class="print:hidden"><a class="btn btn-secondary btn-next btn-small" href="#">Learn More</a></p> </div> </div> </article> </div> <div> <div class="code-block mb-1"><pre><article class="c-accordion"> <header class="c-accordion__header color-dark-background"> <p id="aria-lb-what-you-need-to-include"><span>Free tax prep for New Yorkers</span><em class="block font-normal">NYC Free Tax Prep</em></p><button aria-controls="aria-c-what-you-need-to-include" aria-expanded="true" class="c-accordion__toggle print:hidden active" data-js="accordion"><span class="c-accordion__toggle-active">hide this list</span><span class="c-accordion__toggle-inactive">show this list</span></button> </header> <div aria-hidden="false" aria-labelledby="aria-lb-what-you-need-to-include" class="c-accordion__body color-mid-background print:active hidden:overflow animated active" id="aria-c-what-you-need-to-include" role="region"> <div class="c-accordion__padding"> <p class="text-color-blue">NYC Department of Consumer Affairs</p> <p>If you earned $64,000 or less last tax year, the City can help you file your taxes for free. You can file online or, if you make under $54,000, you can file in person.</p> <h4>Apply in person</h4> <p>There are more than 200 NYC Free Tax Prep sites in all five boroughs that can help you file for free.</p> <p class="print:hidden"><a class="btn btn-secondary btn-next btn-small" href="#">Learn More</a></p> </div> </div> </article></pre> </div> </div> </div> </div> </section> <section class="pb-4 mb-4" id="accordion-usage"> <div class="page-wrapper px-2 screen-desktop:px-0"> <header class="layout--home-body"> <div class="my-0 px-2 border-b border-color-grey-light screen-tablet:flex screen-tablet:justify-between"> <h2 class="m-0 pt-1 pb-4"><a class="text-color-grey-mid font-normal no-underline capitalize" href="#accordion-usage">Accordion Usage</a></h2> </div> </header> <div class="layout--home-body"> <div class="my-0 pt-4 px-2 text-font-size-small table-align-start"><h3>Global Script</h3> <p>The Accordion Component requires JavaScript for functionality and screen reader accessibility. To use the Accordion in the global ACCESS NYC Patterns script use the following code:</p> <pre><code> <script src="dist/scripts/access-nyc.js"></script> <script> var access = new AccessNyc(); access.accordion(); </script></code></pre> <p>This function will attach the accordion toggling event to the body of the document.</p> <h3>Module</h3> <p>The ES6, CommonJS, and IFFE modules all require importing and object instantiation in your main script:</p> <pre><code>// ES6 import Filter from 'src/components/accordion/accordion'; // CommonJS import Filter from 'dist/components/accordion/accordion.common';  <script src="dist/components/accordion/accordion.iffe.js"></script> new Accordion();</code></pre> <p>The component requires the <code>data-js="accordion"</code> attribute and a unique ID targeting the Accordion body, on the toggling element, in order to function.</p> <h4>Polyfills</h4> <p>This script uses the Toggle Utility as a dependency and requres the same polyfills. See the <a href="toggle#toggle-usage">"Toggle Usage" section</a> for more details.</p></div> </div> </div> </section> <div class="sticky bottom-0 bg-color-white shadow-up relative z-10 overflow-y-scroll whitespace-no-wrap animated fadeInUp"> <nav class="nav-inline text-font-size-small p-4"><span class="mr-4">Jump to:</span><a class="mr-4" href="#accordion-usage">Accordion Usage</a></nav> </div> </article> </main> </div> <footer class="py-4 text-center color-dark-background"> <p> <nav><a class="px-1" href="index">Home</a><a class="px-1" href="about">About</a><a class="px-1" href="installation">Installation</a><a class="px-1" href="design-tools">Design Tools</a><a class="px-1" href="developer-tools">Developer Tools</a></nav> </p> <p>Maintained by <a href="https://nyc.gov/opportunity">NYC Opportunity</a></p> <p class="m-0"> <nav><a class="px-1" href="https://github.com/orgs/CityOfNewYork/teams/nycopportunity">GitHub</a><a class="px-1" href="https://twitter.com/nycopportunity">Twitter</a><a class="px-1" href="https://www.facebook.com/NYCOpportunity">Facebook</a><a class="px-1" href="https://www.instagram.com/nycopportunity">Instagram</a></nav> </p> </footer> <script src="scripts/polyfills.js"></script> <script src="scripts/access-nyc.js"></script> <script src="scripts/vue-components.js"></script> <script type="text/javascript"> var access = new AccessNyc(); var VueComponents = new VueComponents(); access.icons(); access.toggle(); access.alertBanner(); </script> <script type="text/javascript"> access.accordion(); </script> </body> </html>