diff options
| author | Pierre-Denis Vanduynslager <[email protected]> | 2017-01-04 12:22:06 -0500 |
|---|---|---|
| committer | Pierre-Denis Vanduynslager <[email protected]> | 2017-01-04 12:22:06 -0500 |
| commit | c4867cfedb6235708967aa8518c59ffed2816f0b (patch) | |
| tree | c7be6d18ee7c7a61f319bccacc035b9952171db1 /docs/components/collapse.md | |
| parent | 425d156df27fa6c18e979aa000bfe5a346ee3450 (diff) | |
| parent | 1b194c06607f6cc3d087d25d6d49e1698771f3a1 (diff) | |
| download | bootstrap-c4867cfedb6235708967aa8518c59ffed2816f0b.tar.xz bootstrap-c4867cfedb6235708967aa8518c59ffed2816f0b.zip | |
Merge branch 'twbs/v4-dev' into dropdown-keyboard
# Conflicts:
# js/src/dropdown.js
Diffstat (limited to 'docs/components/collapse.md')
| -rw-r--r-- | docs/components/collapse.md | 110 |
1 files changed, 53 insertions, 57 deletions
diff --git a/docs/components/collapse.md b/docs/components/collapse.md index e3172fa75..f48efd9cc 100644 --- a/docs/components/collapse.md +++ b/docs/components/collapse.md @@ -92,7 +92,7 @@ Extend the default collapse behavior to create an accordion. ## Accessibility -Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `in` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed. +Be sure to add `aria-expanded` to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element to be open by default using the `show` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed. Additionally, if your control element is targeting a single collapsible element – i.e. the `data-target` attribute is pointing to an `id` selector – you may add an additional `aria-controls` attribute to the control element, containing the `id` of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself. @@ -124,32 +124,30 @@ $('.collapse').collapse() Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-parent=""`. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 100px;">Name</th> - <th style="width: 50px;">Type</th> - <th style="width: 50px;">Default</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>parent</td> - <td>selector</td> - <td>false</td> - <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td> - </tr> - <tr> - <td>toggle</td> - <td>boolean</td> - <td>true</td> - <td>Toggles the collapsible element on invocation</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 100px;">Name</th> + <th style="width: 50px;">Type</th> + <th style="width: 50px;">Default</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>parent</td> + <td>selector</td> + <td>false</td> + <td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td> + </tr> + <tr> + <td>toggle</td> + <td>boolean</td> + <td>true</td> + <td>Toggles the collapsible element on invocation</td> + </tr> + </tbody> +</table> ### Methods @@ -179,36 +177,34 @@ Hides a collapsible element. Bootstrap's collapse class exposes a few events for hooking into collapse functionality. -<div class="table-responsive"> - <table class="table table-bordered table-striped"> - <thead> - <tr> - <th style="width: 150px;">Event Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td>show.bs.collapse</td> - <td>This event fires immediately when the <code>show</code> instance method is called.</td> - </tr> - <tr> - <td>shown.bs.collapse</td> - <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> - </tr> - <tr> - <td>hide.bs.collapse</td> - <td> - This event is fired immediately when the <code>hide</code> method has been called. - </td> - </tr> - <tr> - <td>hidden.bs.collapse</td> - <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> - </tr> - </tbody> - </table> -</div> +<table class="table table-bordered table-striped table-responsive"> + <thead> + <tr> + <th style="width: 150px;">Event Type</th> + <th>Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>show.bs.collapse</td> + <td>This event fires immediately when the <code>show</code> instance method is called.</td> + </tr> + <tr> + <td>shown.bs.collapse</td> + <td>This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).</td> + </tr> + <tr> + <td>hide.bs.collapse</td> + <td> + This event is fired immediately when the <code>hide</code> method has been called. + </td> + </tr> + <tr> + <td>hidden.bs.collapse</td> + <td>This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).</td> + </tr> + </tbody> +</table> {% highlight js %} $('#myCollapsible').on('hidden.bs.collapse', function () { |
