Digital Design System
Section
The expanding sections are used when you wanted to show users limited information until the user expands a section
Below you will find the different definitions and options to create an expanding section component
Table of contents
Overview
Global Definition
Expanding Sections are setup to take up the full width of a bootstrap column, and to contain other components inside.
Each expanding component is based on a global CSS class called "msds-expanding-section". It is important to include this class first as this is the main HTML class of the component. Without this HTML class, you cannot utilize component.
Ensure that each section element input has an id and that the label for for that element has a matching for attribute
Input
<input id="how-do-i-find-marketplace" type="checkbox"/>
Label
<label for="how-do-i-find-marketplace">
There are 2 implementations of Expanding Sections, a light themed component a dark themed component. Each implementation can be setup to use checkboxes or radio buttons, based on the desired behavior.
The Default Expanding Sections
- Expanding Sections using checkboxes – the checkboxes allow multiple expanding section elements to be open at any time.
- Expanding Sections using radio buttons – the radio buttons only allow one expanding section element to be open at any time.
Section using checkboxes
To use “expanding section” you need to add the following HTML class: "msds-section".
The Section with checkboxes can have multiple sections open at once.
Below is an example of the Milestone Default Expanding Section that you can copy into your solution to utilize the component.
<div class="container">
<div class="row">
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-1-checkbox" class="msds-expanding-section__checkbox" type="checkbox"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-1-checkbox">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
</input>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-2-checkbox" class="msds-expanding-section__checkbox" type="checkbox"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-2-checkbox">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
</input>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
</div>
</div>Section using radio buttons
To make use of expanding sections that can only have one element open at any time, change all the input types from checkbox to radio, and add a name property to the input tag. Ensure that all inputs have the same name type=”checkbox” to type=”radio” name=”section”
Below is an example of the Milestone Expanding Section with radio buttons that you can copy into your solution to utilize the component.
<div class="container">
<div class="row">
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-1-radio" class="msds-expanding-section__checkbox" type="radio" name="section-level-1"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-1-radio">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
</input>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-2-radio" class="msds-expanding-section__checkbox" type="radio" name="section-level-1"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-2-radio">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
</div>
</div>Section dark theme
To use “dark themed section” you need to add the following CCS class: " msds-section--dark".
Below is an example of the Milestone Dark Themed Expanding Section that you can copy into your solution to utilize the component.
<div class="container">
<div class="row">
<div class="msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2">
<div class="col-12">
<input id="expanding-section-1-dark" class="msds-expanding-section__checkbox" type="radio" name="section-level-1-dark"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-1-dark">
<div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
</input>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-white">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
<div class="msds-expanding-section msds-expanding-section--dark msds-bg-alt-blue-2">
<div class="col-12">
<input id="expanding-section-2-dark" class="msds-expanding-section__checkbox" type="radio" name="section-level-1-dark"/>
<label class="msds-expanding-section__buttons-container" for="expanding-section-2-dark">
<div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--dark-secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
</input>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-white">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
</div>
</div>Section with nested components
Components can be nested inside of Expanding sections by putting your desired components markup inside of an expanding section.
Below is an example below to get an overview of nesting components inside an expanding section
<div class="container">
<div class="row">
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-1-nested" class="msds-expanding-section__checkbox" type="radio"
name="section-level-1-nested" />
<label class="msds-expanding-section__buttons-container" for="expanding-section-1-nested">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
<div class="msds-accordion">
<div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
<input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-1">
<label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-1">
<span class="msds-accordion__list-item-header-title">Accordion List Item 1 - Multiple List items Open At Any Time</span>
<span class="msds-accordion__list-item-header-icon">
<svg>
<use href="../../../msds-spritemap.svg#right-arrow" />
</svg>
</span>
</label>
<div class="msds-accordion__list-item-body">
<div class="msds-accordion__list-item-subtitle">
This is the Accordion List Item 1 long title
</div>
<div class="msds-accordion__list-item-description">
<span>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.
</span>
</div>
</div>
</div>
<div class="msds-accordion__list-item msds-accordion__list-item--animate-icon-rotate">
<input type="checkbox" class="msds-accordion__list-item-input" id="accordion-list-item_checkbox-medium-2">
<label class="msds-accordion__list-item-header" for="accordion-list-item_checkbox-medium-2">
<span class="msds-accordion__list-item-header-title">Accordion List Checkbox Item 1 - Multiple List items Open At Any Time</span>
<span class="msds-accordion__list-item-header-icon">
<svg>
<use href="../../../msds-spritemap.svg#right-arrow" />
</svg>
</span>
</label>
<div class="msds-accordion__list-item-body">
<div class="msds-accordion__list-item-subtitle">
This is the Accordion List Item 1 long title
</div>
<div class="msds-accordion__list-item-description">
<span>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.
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="msds-expanding-section msds-bg-gray-gradient-2">
<div class="col-12">
<input id="expanding-section-2-nested" class="msds-expanding-section__checkbox" type="radio"
name="section-level-1-nested" />
<label class="msds-expanding-section__buttons-container" for="expanding-section-2-nested">
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--closed">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#right-arrow"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show more
</div>
</div>
<div class="msds-btn-floating msds-btn-floating--secondary msds-btn-floating--column
msds-expanding-section--open">
<svg class="msds-icon">
<use href="../../../msds-spritemap.svg#cross"></use>
</svg>
<div class="msds-expanding-section__button-text">
Show less
</div>
</div>
</label>
<div class="msds-expanding-section__content msds-text-body-1 msds-text-gray-9">
Quisque dictum elementum maximus. Sed leo arcu, laoreet faucibus iaculis sit amet,
ultricies in elit. Praesent sit amet massa vel lacus hendrerit facilisis. Nulla lectus
elit, dictum et metus nec, venenatis luctus lacus. Ut ut maximus sapien. Suspendisse
varius molestie mauris, in rhoncus purus bibendum a.
</div>
</div>
</div>
</div>
</div>