@ebay/skin/accordion

DS v1

An accordion is a series of expandable sections of content. Each section has a summary header that is used to toggle the display of its related content.

Default Accordion

By default, each section is rendered as closed. When opened, the section will stay open until explicitly closed.

Shipping and returns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text wraps on small screen with this long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Specifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Opened Accordion

Apply the open property to render a section in an open state.

Shipping and returns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Specifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Large Accordion

Apply the accordion--large modifier to increase the size of each section summary.

Shipping and returns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Description
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Specifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Auto-Collapsing Accordion

Use the name attribute to ensure only one section can be open at a time, with other sections automatically closing.

NOTE: For browsers that do not yet support this attribute, Javascript is needed to mimic the behavior as a fallback.

Shipping and returns
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text wraps on small screen with this long text
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Specifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<ul class="accordion" aria-roledescription="accordion"> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Shipping and returns </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Description </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Specifications </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </details> </li> </ul>

<ul class="accordion" aria-roledescription="accordion"> <li> <details class="details" open> <summary class="details__summary"> <span class="details__label"> Shipping and returns </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Description </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Specifications </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> </ul>

<ul class="accordion accordion--large" aria-roledescription="accordion"> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Shipping and returns </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Description </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> <li> <details class="details"> <summary class="details__summary"> <span class="details__label"> Specifications </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> </ul>

<ul class="accordion" aria-roledescription="accordion"> <li> <details class="details" name="accordion-1"> <summary class="details__summary"> <span class="details__label"> Shipping and returns </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> <li> <details class="details" name="accordion-1"> <summary class="details__summary"> <span class="details__label"> Description </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> <li> <details class="details" name="accordion-1"> <summary class="details__summary"> <span class="details__label"> Specifications </span> <span class="details__icon" hidden> <svg class="icon icon--16 details__expand" height="16" width="16" aria-hidden="true" > <use href="#icon-add-16" /> </svg> <svg class="icon icon--16 details__collapse" height="16" width="16" aria-hidden="true" > <use href="#icon-remove-16" /> </svg> </span> </summary> <div class="details__content">...</div> </details> </li> </ul>