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

Remove option for accordion behavior from expandables documentation #593

Merged
merged 6 commits into from
Feb 22, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,523 changes: 941 additions & 582 deletions package-lock.json

Large diffs are not rendered by default.

6 changes: 2 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,15 +50,13 @@
"grunt-contrib-cssmin": "^1.0.2",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-less": "^1.4.1",
"grunt-contrib-uglify": "git+https://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
"grunt-contrib-uglify-es": "^3.3.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-legacssy": "~0.4.0",
"grunt-string-replace": "^1.3.1",
"grunt-topdoc": "~0.3.0",
"load-grunt-tasks": "^3.5.2",
"moment": "^2.17.1",
"parallelshell": "^3.0.0",
"time-grunt": "^1.4.0",
"uglify-es": "^3.1.0"
}
"time-grunt": "^1.4.0" }
}
100 changes: 0 additions & 100 deletions page-components/expandables.md
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.

Loading