-
-
Notifications
You must be signed in to change notification settings - Fork 79k
Provide a standalone accordion component #30042
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Closed
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
9881311
Add standalone accordion component #30015
99e6f1c
Remove overflow hidden to support position sticky inside accordions. …
d2969cf
Move padding to btn inside accordion header so the click area is larg…
5f42b4c
Removed unused padding property
f95fa04
Updated formatting in accordion documentation examples
8d455eb
Extract accordion to a separate component
1f7e5d8
Fixed active state on accordion page
bdd82c6
Copy improvements and added missing backtick
2c96e64
Copy improvements in the "How it works" section
20aa53a
Rewrote accordions in order to be more customizable
c6e92fb
Use collapsed class for theming rather then aria attribute
1224da3
Removed unused '.focus' class
cb601aa
Accordion icon rotation is now configurable with variables
3beab28
Replace fixed rotate value with general transform property.
2419f2e
Separate active states & readability improvements
25aba77
Update alerts.md
XhmikosR File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| // | ||
| // Base styles | ||
| // | ||
|
|
||
| .accordion-button { | ||
| @include font-size($font-size-base); | ||
| display: flex; | ||
| align-items: baseline; | ||
| width: 100%; | ||
| padding: $accordion-button-padding-y $accordion-button-padding-x; | ||
| color: $accordion-button-color; | ||
| text-align: left; | ||
| background-color: $accordion-button-bg; | ||
| border: $accordion-border-width solid $accordion-border-color; | ||
| border-bottom: none; | ||
| @include border-radius(0); | ||
|
|
||
| &:not(.collapsed) { | ||
| color: $accordion-button-active-color; | ||
| background-color: $accordion-button-active-bg; | ||
|
|
||
| &::after { | ||
| background-image: escape-svg($accordion-button-active-icon); | ||
| transform: $accordion-button-active-icon-transform; | ||
| } | ||
| } | ||
|
|
||
| // Accordion icon | ||
| &::after { | ||
| flex-shrink: 0; | ||
| width: 1.5rem; | ||
| height: 1rem; | ||
| margin-left: auto; | ||
| content: ""; | ||
| background-image: escape-svg($accordion-button-icon); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| background-size: 1.5rem; | ||
| transform: $accordion-button-icon-transform; | ||
| @include transition($accordion-icon-transition); | ||
| } | ||
|
|
||
| &:focus { | ||
| position: relative; | ||
| outline: 0; | ||
| box-shadow: $btn-focus-box-shadow; | ||
| } | ||
| } | ||
|
|
||
| .accordion-header { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .accordion-item { | ||
| @include border-radius($accordion-border-radius); | ||
|
|
||
| &:last-of-type { | ||
| .accordion-button { | ||
| border-bottom: $accordion-border-width solid $accordion-border-color; | ||
|
|
||
| // Only set a border-radius on the last item if the accordion is collapsed | ||
| &.collapsed { | ||
| @include border-bottom-radius($accordion-border-radius); | ||
| } | ||
| } | ||
|
|
||
| .accordion-body { | ||
| border: $accordion-border-width solid $accordion-border-color; | ||
| border-top: none; | ||
| @include border-bottom-radius($accordion-border-radius); | ||
| } | ||
| } | ||
|
|
||
| &:first-of-type { | ||
| .accordion-button { | ||
| @include border-top-radius($accordion-border-radius); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .accordion-body { | ||
| padding: $accordion-body-padding-y $accordion-body-padding-x; | ||
| border: $accordion-border-width solid $accordion-border-color; | ||
| border-bottom: none; | ||
| } | ||
|
|
||
|
|
||
| // Flush accordion items | ||
| // | ||
| // Remove borders and border-radius to keep accordion items edge-to-edge. | ||
|
|
||
| .accordion-flush { | ||
| .accordion-button { | ||
| color: $accordion-flush-button-color; | ||
| background-color: $accordion-flush-button-bg; | ||
|
|
||
| &:not(.collapsed) { | ||
| color: $accordion-flush-button-active-color; | ||
| background-color: $accordion-flush-button-active-bg; | ||
| } | ||
|
|
||
| border-right: 0; | ||
| border-left: 0; | ||
| @include border-radius(0); | ||
| } | ||
|
|
||
| .accordion-body { | ||
| border-width: 0; | ||
| } | ||
|
|
||
| .accordion-item { | ||
| border-right-width: 0; | ||
| border-left-width: 0; | ||
| @include border-radius(0); | ||
|
|
||
| &:first-of-type { | ||
| .accordion-button { | ||
| border-top-width: 0; | ||
| @include border-top-radius(0); | ||
| } | ||
| } | ||
|
|
||
| &:last-of-type { | ||
| .accordion-button { | ||
| border-bottom-width: 0; | ||
| @include border-bottom-radius(0); | ||
| } | ||
|
|
||
| .accordion-body { | ||
| border-width: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| // Zebra-striping | ||
| // | ||
| // Default zebra-stripe styles (alternating gray and transparent backgrounds) | ||
|
|
||
| .accordion-striped { | ||
| .accordion-button { | ||
| color: $accordion-striped-button-color; | ||
| background-color: $accordion-striped-button-bg; | ||
|
|
||
| &:not(.collapsed) { | ||
| color: $accordion-striped-button-accent-active-color; | ||
| background-color: $accordion-striped-button-active-bg; | ||
| } | ||
| } | ||
|
|
||
| .accordion-item:nth-of-type(#{$accordion-striped-order}) { | ||
| .accordion-button { | ||
| color: $accordion-striped-button-accent-color; | ||
| background-color: $accordion-striped-button-accent-bg; | ||
|
|
||
| &:not(.collapsed) { | ||
| color: $accordion-striped-button-accent-active-color; | ||
| background-color: $accordion-striped-button-accent-active-bg; | ||
| } | ||
| } | ||
|
|
||
| .accordion-body { | ||
| background-color: $accordion-striped-body-accent-bg; | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| --- | ||
| layout: docs | ||
| title: Accordion | ||
| description: Provides an accordion to collapse content vertically. | ||
| group: components | ||
| aliases: | ||
| - "/components/" | ||
| - "/docs/4.3/components/" | ||
| toc: true | ||
| --- | ||
|
|
||
| ## How it works | ||
|
|
||
| The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. In order to render an accordion that's expanded you need to add the `open` class on the `.accordion` | ||
|
|
||
| {{< callout info >}} | ||
| {{< partial "callout-info-prefersreducedmotion.md" >}} | ||
| {{< /callout >}} | ||
|
|
||
| ## Example | ||
|
|
||
| Click the accordions below to expand/collapse the accordion content. | ||
|
|
||
| {{< example >}} | ||
| <div class="accordion" id="accordionExample"> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="headingOne"> | ||
| <button class="accordion-button" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> | ||
| Accordion Item #1 | ||
| </button> | ||
| </h2> | ||
| <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="headingTwo"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> | ||
| Accordion Item #2 | ||
| </button> | ||
| </h2> | ||
| <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="headingThree"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> | ||
| Accordion Item #3 | ||
| </button> | ||
| </h2> | ||
| <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{< /example >}} | ||
|
|
||
| ### Accordion flush example | ||
|
|
||
| Add `.accordion-flush` to remove some borders and rounded corners to render accordions items edge-to-edge. | ||
|
|
||
| {{< example >}} | ||
| <div class="accordion accordion-flush" id="accordionFlushExample"> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="flush-headingOne"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> | ||
| Accordion Item #1 | ||
| </button> | ||
| </h2> | ||
| <div id="flush-collapseOne" class="collapse" aria-labelledby="flush-headingOne" data-parent="#accordionFlushExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="flush-headingTwo"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> | ||
| Accordion Item #2 | ||
| </button> | ||
| </h2> | ||
| <div id="flush-collapseTwo" class="collapse" aria-labelledby="flush-headingTwo" data-parent="#accordionFlushExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="flush-headingThree"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"> | ||
| Accordion Item #3 | ||
| </button> | ||
| </h2> | ||
| <div id="flush-collapseThree" class="collapse" aria-labelledby="flush-headingThree" data-parent="#accordionFlushExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{< /example >}} | ||
|
|
||
| ### Accordion striped example | ||
|
|
||
| Use `.accordion-striped` to add zebra-striping to any accordion. | ||
|
|
||
| {{< example >}} | ||
| <div class="accordion accordion-striped" id="accordionStripedExample"> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="striped-headingOne"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#striped-collapseOne" aria-expanded="false" aria-controls="striped-collapseOne"> | ||
| Accordion Item #1 | ||
| </button> | ||
| </h2> | ||
| <div id="striped-collapseOne" class="collapse" aria-labelledby="striped-headingOne" data-parent="#accordionStripedExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="striped-headingTwo"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#striped-collapseTwo" aria-expanded="false" aria-controls="striped-collapseTwo"> | ||
| Accordion Item #2 | ||
| </button> | ||
| </h2> | ||
| <div id="striped-collapseTwo" class="collapse" aria-labelledby="striped-headingTwo" data-parent="#accordionStripedExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| <div class="accordion-item"> | ||
| <h2 class="accordion-header" id="striped-headingThree"> | ||
| <button class="accordion-button collapsed" type="button" data-toggle="collapse" data-target="#striped-collapseThree" aria-expanded="false" aria-controls="striped-collapseThree"> | ||
| Accordion Item #3 | ||
| </button> | ||
| </h2> | ||
| <div id="striped-collapseThree" class="collapse" aria-labelledby="striped-headingThree" data-parent="#accordionStripedExample"> | ||
| <div class="accordion-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {{< /example >}} | ||
|
|
||
| ## Accessibility | ||
|
|
||
| Please read the [collapse accessibility section]({{< docsref "/components/collapse#accessibility" >}}) for more information. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.