aboutsummaryrefslogtreecommitdiff
path: root/docs/javascript/collapse.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-11-30 20:17:45 -0800
committerMark Otto <[email protected]>2014-11-30 20:17:45 -0800
commitb648a77ed36d2d3a38842a7ab5a19ba50c52bae6 (patch)
tree5f2a1a3db3f9464f1803c1afef8946e07951ad5c /docs/javascript/collapse.md
parentb53ad74d472d0dbe3669b61e79c89fd35da4aa1f (diff)
parent0eb2c922d892bdcd4356b7212ab61c7d8a44c2dc (diff)
downloadbootstrap-b648a77ed36d2d3a38842a7ab5a19ba50c52bae6.tar.xz
bootstrap-b648a77ed36d2d3a38842a7ab5a19ba50c52bae6.zip
Merge branch 'master' into v4
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
Diffstat (limited to 'docs/javascript/collapse.md')
-rw-r--r--docs/javascript/collapse.md32
1 files changed, 29 insertions, 3 deletions
diff --git a/docs/javascript/collapse.md b/docs/javascript/collapse.md
index cf764b017..3a25b6b94 100644
--- a/docs/javascript/collapse.md
+++ b/docs/javascript/collapse.md
@@ -3,16 +3,42 @@ layout: page
title: Collapse
---
-Get base styles and flexible support for collapsible components like accordions and navigation.
+Flexible plugin that utilizes a handful of classes for easy toggle behavior.
<div class="bs-callout bs-callout-danger">
<h4>Plugin dependency</h4>
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
</div>
-## Example accordion
+## Example
-Using the collapse plugin, we built a simple accordion by extending the panel component.
+Click the buttons below to show and hide another element via class changes:
+
+- `.collapse` hides content
+- `.collapsing` is applied during transitions
+- `.collapse.in` shows content
+
+You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
+
+{% example html %}
+ <p>
+ <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ Link with href
+ </a>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ Button with data-target
+ </button>
+ </p>
+ <div class="collapse" id="collapseExample">
+ <div class="well">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+ </div>
+{% endexample %}
+
+## Accoridion example
+
+Extend the default collapse behavior to create an accordion with the panel component.
{% example html %}
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">