diff options
| author | Mark Otto <[email protected]> | 2014-11-30 20:17:45 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-11-30 20:17:45 -0800 |
| commit | b648a77ed36d2d3a38842a7ab5a19ba50c52bae6 (patch) | |
| tree | 5f2a1a3db3f9464f1803c1afef8946e07951ad5c /docs/javascript/collapse.md | |
| parent | b53ad74d472d0dbe3669b61e79c89fd35da4aa1f (diff) | |
| parent | 0eb2c922d892bdcd4356b7212ab61c7d8a44c2dc (diff) | |
| download | bootstrap-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.md | 32 |
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"> |
