Collapsible Items

Overview

The expand/collapse functionality is recommended for pages that contain frequently asked questions or topics followed by lengthy explanations of each. It should not be used for regular content, however. The expand/collapse functionality helps streamline the presentation of the content to visually reduce its apparent volume.

Examples:

Versions and How to Implement

The following versions are available. Click the topics in the "Version 1" section below to learn how to implement the functionality. For additional customization, please contact us. We'll work with you to ensure that it meets the needs of your users, and is both accessible and responsive.

Version 1

Implementing Expand/Collapse

Expand All Collapse All

Click a topic, or press the enter key on a topic, to reveal its answer.

Initial Setup

Link to the JavaScript library. It is recommended that the JavaScript library file is linked from the Foot Included section in the Page Metadata component.

JavaScript Library

<script type="text/javascript" src="/assets/home/js/pages/agencies/expand-collapse-2.js"></script>

HTML Expand and Collapse Basic Structure

The basic structure of the expand/collapse functionality follows:

HTML Structure

<div class="faq-v1">
   <div class="faq-head">
    <h3 class="faq-heading">Optional FAQ Heading</h3>
     <div class="faq-controls"><a href="javascript:expandAll();" class="faq-expand-all">Expand All</a><a href="javascript:collapseAll();" class="faq-collapse-all">Collapse All</a></div>
    </div>
	<p>Click a topic, or press the enter key on a topic, to reveal its answer.</p>
    <div data-answer="faq1" class="faq-questions">
      <p>First Question Set</p>
    </div>
   <div id="faq1" class="faq-answers">
     <p>Bacon ipsum dolor amet cow alcatra porchetta sausage chuck cupim. Sausage chicken turkey.</p>
   </div>
   <div data-answer="faq2" class="faq-questions">
     <p>Second Question Set</p>
   </div>
   <div id="faq2" class="faq-answers">
     <p>Kevin pork belly chuck, tongue picanha salami andouille ball tip chicken pork loin brisket bresaola beef strip steak prosciutto.</p>
   </div>
   <div data-answer="faq+N" class="faq-questions">
     <p>N equals the next incremental number<p>
   </div>
   <div id="faq+N" class="faq-answers">
     <p>Brisket bresaola beef strip steak prosciutto.</p>
   </div>
</div>

The main <div> has a class of .faq-v1. All content in the div will inherit the style from the class and functionality as long the structure is maintained.

To meet accessibility requirements, all headings on a webpage must nest hierarchically. Review all heading tags on the page, and set the optional FAQ heading at the appropriate level (e.g., h2, h3, h4, etc.) to ensure it will nest in the proper order.

Instructions (i.e., <p>Click a topic, or press the enter key on a topic, to reveal its answer.</p>) are also required to meet accessibility guidelines.

While the expand/collapse functionality can work without the Expand All and Collapse All buttons, they are required to improve accessibility and ensure that users using assistive technology can toggle either state. In the example code above, the buttons are contained in the <div> with the class .faq-head.

Each <div> listed below the buttons has a data-answer attribute and each answer has an ID with the same value, as shown (refer to highlighted values) above. This is important in order to link them together. The data-answer attribute and the ID value must be the same, and increase incrementally for each subsequent question.

Note: In the above example "faq+N" represents the next incremental number on the series of <div>. In this case the next one value for data-answer and id will be div3.

Additional Versions

Two additional versions of the expand/collapse functionality are available, and can easily be implemented by simply using a different class name. By changing class="faq-v1" to class="faq-v2" or class="faq-v3", the appearance of the expand/collapse content will change accordingly. The examples below are shown for the different class name applied.

Additional Customization

The expand/collapse functionality can be further customized to match agency colors by overriding some of the default class attributes.

Change CSS Question/Topic Background Color

.faq-v1 .faq-questions {
    background: #476191;
    border-radius: 5px;
    padding: 0 .5rem;
    display: flex;
    flex-flow: row nowrap;
}

Each topic/question can also be numbered by adding or removing .numbered

Numbering of Topics/Questions

<div class="faq-v2 numbered">
     <div class="faq-head">
     ...
     <div>
<div>

Support for URL Parameters

If, on another webpage, you need to add a link to a specific, expanded question set, pass the ID of the topic/question set with URL parameters, as shown in the example below.

Numbering of Topic/Questions

http://www1.nyc.gov/site/process/content/collapsible-items.page?question=faq3

The following example will expand the answer associated with faq3 (above).
Try it yourself.

Version 2

Optional FAQ Heading

Expand All Collapse All

Click a question, or press the enter key on a question, to reveal its answer.

First Question Set

Bacon ipsum dolor amet cow alcatra porchetta sausage chuck cupim. Sausage chicken turkey, andouille turducken shank pork leberkas meatball porchetta tail filet mignon biltong boudin. Tongue swine pancetta porchetta ham hock rump filet mignon shank pork loin. Beef tri-tip ground round prosciutto pork shank boudin drumstick bresaola capicola pig cow t-bone pancetta frankfurter.

Second Question Set

Kevin pork belly chuck, tongue picanha salami andouille ball tip chicken pork loin brisket bresaola beef strip steak prosciutto. Swine kielbasa ham, tri-tip fatback doner chicken meatball tail bacon prosciutto shankle venison. Ball tip cupim chuck spare ribs pork loin. Meatloaf salami strip steak, t-bone short ribs pastrami spare ribs venison jerky kevin shankle porchetta swine chuck pig. Spare ribs biltong kevin tenderloin rump flank burgdoggen fatback beef ribs.

Third Question Set

Ribeye venison pastrami, drumstick kielbasa picanha tongue jowl filet mignon alcatra capicola sirloin cupim swine tenderloin. Burgdoggen flank pancetta spare ribs boudin jerky short loin filet mignon sirloin turkey hamburger picanha bresaola. Porchetta pork loin capicola tri-tip pork belly shankle. Picanha cupim alcatra leberkas. Spare ribs tongue frankfurter, strip steak porchetta sausage pork belly pancetta pork chop brisket landjaeger biltong. Turducken leberkas shankle kielbasa pork belly burgdoggen meatball.

Fourth Question Set

Sirloin bresaola boudin rump, short ribs andouille salami. Alcatra tail meatball ham ham hock, spare ribs landjaeger. Rump beef ribs andouille sirloin, kielbasa turkey beef capicola pork chop meatball salami ham. Landjaeger t-bone corned beef jerky picanha kevin chicken pork capicola brisket ball tip fatback doner. Chuck cow doner flank biltong boudin corned beef short loin shoulder filet mignon cupim kielbasa.

Fifth Question Set

Meatloaf kevin cow pork belly shankle chicken jerky strip steak. Burgdoggen brisket doner pastrami leberkas strip steak turkey t-bone porchetta sirloin. Strip steak meatball ham hock picanha. Capicola chicken leberkas frankfurter turkey jerky meatball chuck rump meatloaf filet mignon venison flank brisket. Short ribs beef leberkas meatball, ham hock short loin landjaeger venison jowl fatback filet mignon turducken flank cupim sausage. Porchetta chicken leberkas frankfurter jerky tail rump t-bone pork pork loin pork chop.

Version 3

Optional FAQ Heading

Expand All Collapse All

Click a question, or press the enter key on a question, to reveal its answer.

First Question Set

Second Question Set

Third Question Set

Fourth Question Set

Fifth Question Set