Collapsable Headings

Collapsable headings are a simplified accordion pattern. Tyfy collapsable headings:

• are easy to implement
• are accessible using keyboard input
• are responsive
• can be nested
• allow for anchored links inside collapsed content
• require Javascript (collapsables.js)

Content authors can use this pattern by adding a single CSS class a heading (H2 through H6). JavaScript encapsulates all the content belonging to that heading in a block element, collapses the content, and binds a click event to the heading to toggle the display of the content. Collapsable headings are easy to implement and apply in simple text editors like CKEditor.

The display of collapsable headings is responsive. At large screen widths, collapsable headings and content are fully bordered. At small screen widths, the design changes to remove the full border and maximize horizontal space.

Accessibility

The accessibility of the collapsables pattern was implemented based on the examples provided by Heydon Pickering in his "Inclusive Components". In the absense of Javascript, the collapsable content is presented as normal content. With JavaScript enabled, the DOM is modified to add the necessary elements and attributes to enable keyboard accessibility.

HTML Structure

Create a collapsable heading by adding the collapsable class to a heading (H2 through H6).

<h2 class="collapsable">Collapsable Heading</h2>
<p>[content under the heading]</p>
<ul>[content under the heading]</ul>
<h2>Regular Heading 2</h2>
<p>[content under the heading]</p>
<ul>[content under the heading]</ul>

JavaScript identifies the content belonging to the heading. The content belonging to a heading is defined as all the sibling elements following the heading element up to the next heading of the same or higher level. JavaScript wraps the content belonging to the heading in a <div> with the class tyfy-collapsables. For keyboard accessibility, a <button> is added to the collapsable heading with an ARIA attribute to indicate state. To indicate that JavaScript has acted on the collapsable heading, the class tyfy-collapsable-processed is added to the heading. So, after JavaScript has run, the code will appear as follows:

<h2 class="collapsable closed tyfy-collapsable-processed">
  <button aria-expanded="false">Collapsable Heading</button>
</h2>
<div class="tyfy-collapsables closed hiding">
  <p>[content under the heading]</p>
  <ul>[content under the heading]</ul>
</div>
<h2>Regular Heading 2</h2>
<p>[content under the heading]</p>
<ul>[content under the heading]</ul>

As you can see from the example, the default state of a collapsable area is closed. The default state can be open by addition of the open class to the collapsable heading.

Variables

$tybreak-collapsables

50em !default;

Screen width below which the collapsable heading design changes to maximize horizontal space.

$tywidth-border

2px !default;

Thickness of the borders defining collapsable headings and content.

$tycolor-border

mix($tycolor-fg,$tycolor-bg,12%) !default;

Default border color.

$tyicons-angle-up

"ea08" !default;

Character code for the icon applied to a collapsable heading. The icon is rotated 180 degrees when the collapsable heading is in the closed state.

Example

<p><a href="#testanchor">Test anchor link</a></p>
<h2 class="collapsable">Lorem ipsum dolor sit amet</h2>
<p>Consectetur adipiscing elit. Maecenas euismod varius purus et accumsan. Suspendisse mollis augue sem, eu varius ex ornare at. Cras convallis lorem in malesuada porttitor. Integer malesuada, nisi vel gravida luctus, tellus mi finibus est, ac dignissim elit tortor quis erat.</p>
<h2 class="collapsable">Praesent accumsan</h2>
<p>Ligula volutpat luctus volutpat, arcu enim sagittis mi, scelerisque placerat felis ipsum ut tellus. Phasellus eget augue sit amet mauris lacinia fermentum et id ligula. Duis in odio velit. Proin tempor dolor non ultrices aliquam.</p>
<h3 class="collapsable">Morbi ac quam ac leo accumsan tempor sed in mauris</h3>
<p><a name="testanchor"><em>Test anchor destination</em></a> lacinia congue. Quisque consectetur metus vitae aliquet pellentesque. Integer non accumsan augue, nec mollis quam. Sed congue diam quis est eleifend, sed pulvinar tellus ullamcorper. Phasellus ante velit, blandit id urna sit amet, sagittis tincidunt magna. Etiam turpis neque, dignissim vitae lacus sed, sagittis consequat sapien.</p>
<h3 class="collapsable">Quisque ultricies et ipsum ut posuere</h3>
<p>Nulla vitae massa et orci ornare convallis. Integer non aliquam eros. Aenean tempus iaculis malesuada. Proin lobortis quam ac erat dapibus, vitae dictum ex placerat. Aenean lobortis accumsan arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<h3 class="collapsable">Sed sed quam convallis</h3>
<p>Porttitor magna vitae, iaculis nulla. Morbi in sem molestie, hendrerit velit id, egestas dolor. Nulla facilisi. Sed at augue finibus, interdum justo a, tincidunt urna.</p>
<h2 class="collapsable open">Morbi interdum (initially open)</h2>
<p>Eu dictum orci venenatis id. Pellentesque consectetur accumsan ex id lobortis. Duis eget blandit ante, in iaculis lacus. Sed justo ipsum, euismod et venenatis quis, pharetra eu dolor. In condimentum placerat augue vel consequat. Quisque euismod fringilla tristique. Nunc convallis lectus ut tellus finibus, sit amet efficitur tortor blandit.</p>