Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Commit

Permalink
Remove option for accordion behavior from expandables documentation
Browse files Browse the repository at this point in the history 
As shared in cfpb/capital-framework#536 and
cfpb/capital-framework#665, we’ve removed the
accordion option from our design patterns. This updates our
documentation to match the implementation guidelines.
  • Loading branch information
@marteki
marteki committed Feb 21, 2018
1 parent bb69eef commit bb035a7
Showing 1 changed file with 0 additions and 100 deletions.
100 changes: 0 additions & 100 deletions page-components/expandables.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -542,108 +542,8 @@ In the default mode, users are able to have multiple sections of an expandable g

</div>

<h3 class="h4">Accordion (alternate)</h3>

<div class="content-33 content-first">

With the “accordion” mode, users can only view the contents of one section at a time; when a user expands an additional section, the previously-expanded section will collapse automatically.

This can be desirable for maintaining the height of a group of expandable sections, but it can be disorienting when the height of the expandable sections is greater than the height of the user’s viewport (e.g., for users of mobile phones or netbooks), which can lead to off-screen sections closing and shifting all of the content on the screen. For this reason, you should avoid the “accordion” mode if the expanded height of any of the sections is greater than 400px.

Add the `data-accordion="true"` attribute to the expandable group to activate the accordion mode.

</div>

<div class="content-67 content-last">

{::nomarkdown}
<div class="o-expandable-group o-expandable-group__accordion">
<div class="o-expandable o-expandable__padded">
<button class="o-expandable_header o-expandable_target" title="Expand content">
<span class="o-expandable_header-left o-expandable_label">
Expandable Header 1
</span>
<span class="o-expandable_header-right o-expandable_link">
<span class="o-expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="o-expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</button>
<div class="o-expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
<div class="o-expandable o-expandable__padded">
<button class="o-expandable_header o-expandable_target" title="Expand content">
<span class="o-expandable_header-left o-expandable_label">
Expandable Header 2
</span>
<span class="o-expandable_header-right o-expandable_link">
<span class="o-expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="o-expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</button>
<div class="o-expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
<div class="o-expandable o-expandable__padded">
<button class="o-expandable_header o-expandable_target" title="Expand content">
<span class="o-expandable_header-left o-expandable_label">
Expandable Header 3
</span>
<span class="o-expandable_header-right o-expandable_link">
<span class="o-expandable_cue-open">
Show
<span class="cf-icon cf-icon-plus-round"></span>
</span>
<span class="o-expandable_cue-close">
Hide
<span class="cf-icon cf-icon-minus-round"></span>
</span>
</span>
</button>
<div class="o-expandable_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Neque ipsa voluptatibus soluta nobis unde quisquam
temporibus magnam debitis quidem. Ducimus ratione
corporis nesciunt earum vel est quaerat blanditiis
dolore ipsa?
</p>
</div>
</div>
</div>
{:/nomarkdown}

</div>

<h2 id="accessibility">Accessibility</h2>

The `find` function will not discover information hidden by a collapsed expandable, so use good judgement in deciding which information to hide.

Non-javascript users should default to the expanded state. Otherwise, the default state (expanded or collapsed) will depend on the circumstance.

0 comments on commit bb035a7

Please sign in to comment.