Tabs and accordions

To set up tabs and accordions Magento UI library provides 2 types of mixins: .lib-data-tabsbase() and .lib-data-accordionbase(). These mixins reset markup elements default styles and add minimal required css setup to make these elements work properly.

Tabs

The .lib-data-tabs() mixin is used to setup tabs parameters.

  <dl class="example-sections-1" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#product.info.description">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_tags">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_reviews">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

.example-sections-1 {
    .lib-data-tabs();
}

Tabs mixin variables

    
        
            Mixin variable
            Global variable
            Default value
            Allowed values
            Comment
        
        
            @_tab-control-font-family
            @tab-control__font-family
            false
            '' | false | value
            Tabs font family
        
        
            @_tab-control-font-size
            @tab-control__font-size
            @font-size__base
            '' | false | value
            Tabs font size
        
        
            @_tab-control-font-weight
            @tab-control__font-weight
            @font-weight__semibold
            '' | false | value
            Tabs font weight
        
        
            @_tab-control-font-style
            @tab-control__font-style
            false
            '' | false | value
            Tabs font style
        
        
            @_tab-control-line-height
            @tab-control__line-height
            @tab-control__height
            '' | false | value
            Tabs line height
        
        
            Tabs controls settings
        
        
            @_tab-control-background-color
            @tab-control__background-color
            @panel__background-color
            '' | false | value
            Current tab background
        
        
            @_tab-control-color
            @tab-control__color
            @link__color
            '' | false | value
            Current tab text color
        
        
            @_tab-control-text-decoration
            @tab-control__text-decoration
            none
            '' | false | value
            Current tab text-decoration
        
        
            @_tab-control-background-color-hover
            @tab-control__hover__background-color
            lighten(@tab-control__background-color, 5%)
            '' | false | value
            Hovered tab background
        
        
            @_tab-control-color-visited
            @tab-control__color
            @text__color__muted
            '' | false | value
            Visited tab color
        
        
            @_tab-control-text-decoration-visited
            @tab-control__color
            
            '' | false | value
            Visited tab text-decoration
        
        
            @_tab-control-color-hover
            @tab-control__hover__color
            @tab-control__color
            '' | false | value
            Hovered tab text color
        
        
            @_tab-control-text-decoration-hover
            @tab-control__text-decoration
            @tab-control__text-decoration
            '' | false | value
            Hovered tab text-decoration
        
        
            @_tab-control-background-color-active
            @tab-control__active__background-color
            lighten(@tab-control__background-color, 15%)
            '' | false | value
            Active tab background
        
        
            @_tab-control-color-active
            @tab-control__active__color
            @text__color
            '' | false | value
            Active tab text color
        
        
            @_tab-control-text-decoration-active
            @tab-control__text-decoration
            @tab-control__text-decoration
            '' | false | value
            Active tab text-decoration
        
        
            @_tab-control-height
            @tab-control__height
            @indent__l
            '' | false | value
            Height of tab control
        
        
            @_tab-control-margin-right
            @tab-control__margin-right
            @indent__xs
            '' | false | value
            Right margin of tab title block
        
        
            @_tab-control-padding-top
            @tab-control__padding-top
            @indent__xs
            '' | false | value
            Tab control padding top
        
        
            @_tab-control-padding-right
            @tab-control__padding-right
            @indent__base
            '' | false | value
            Tab control padding right
        
        
            @_tab-control-padding-bottom
            @tab-control__padding-bottom
            @tab-control__padding-bottom
            '' | false | value
            Tab control padding bottom
        
        
            @_tab-control-padding-left
            @tab-control__padding-left
            @tab-control__padding-left
            '' | false | value
            Tab control padding left
        
        
            @_tab-control-border-width
            @tab-control__border-width
            @border-width__base
            '' | false | value
            Tab control border width
        
        
            @_tab-control-border-color
            @tab-control__border-color
            @border-color__base
            '' | false | value
            Tab control border color
        
        
            Tab content settings
        
        
            @_tab-content-background-color
            @tab-content__background-color
            @tab-control__active__background-color
            '' | false | value
            Tab content background
        
        
            @_tab-content-border-top-status
            @tab-content__border-top-status
            false
            true | false
            Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders
        
        
            @_tab-content-border
            @tab-content__border
            @tab-control__border-width solid @tab-control__border-color
            '' | false | value
            Tab content border
        
        
            @_tab-content-margin-top
            @tab-content__margin-top
            @tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom
            '' | false | value
            Tab content top margin (it is the sum of tabs height and top border width)
        
        
            @_tab-content-padding-top
            @tab-content__padding-top
            @indent__base
            '' | false | value
            Tab content padding
        
        
            @_tab-content-padding-right
            @tab-content__padding-right
            @indent__base
            '' | false | value
            Tab content padding
        
        
            @_tab-content-padding-bottom
            @tab-content__padding-bottom
            @tab-content__padding-top
            '' | false | value
            Tab content padding
        
        
            @_tab-content-padding-left
            @tab-content__padding-left
            @tab-content__padding-right
            '' | false | value
            Tab content padding

Mixin variable	Global variable	Default value	Allowed values	Comment
@_tab-control-font-family	@tab-control__font-family	false	'' \| false \| value	Tabs font family
@_tab-control-font-size	@tab-control__font-size	@font-size__base	'' \| false \| value	Tabs font size
@_tab-control-font-weight	@tab-control__font-weight	@font-weight__semibold	'' \| false \| value	Tabs font weight
@_tab-control-font-style	@tab-control__font-style	false	'' \| false \| value	Tabs font style
@_tab-control-line-height	@tab-control__line-height	@tab-control__height	'' \| false \| value	Tabs line height
Tabs controls settings
@_tab-control-background-color	@tab-control__background-color	@panel__background-color	'' \| false \| value	Current tab background
@_tab-control-color	@tab-control__color	@link__color	'' \| false \| value	Current tab text color
@_tab-control-text-decoration	@tab-control__text-decoration	none	'' \| false \| value	Current tab text-decoration
@_tab-control-background-color-hover	@tab-control__hover__background-color	lighten(@tab-control__background-color, 5%)	'' \| false \| value	Hovered tab background
@_tab-control-color-visited	@tab-control__color	@text__color__muted	'' \| false \| value	Visited tab color
@_tab-control-text-decoration-visited	@tab-control__color		'' \| false \| value	Visited tab text-decoration
@_tab-control-color-hover	@tab-control__hover__color	@tab-control__color	'' \| false \| value	Hovered tab text color
@_tab-control-text-decoration-hover	@tab-control__text-decoration	@tab-control__text-decoration	'' \| false \| value	Hovered tab text-decoration
@_tab-control-background-color-active	@tab-control__active__background-color	lighten(@tab-control__background-color, 15%)	'' \| false \| value	Active tab background
@_tab-control-color-active	@tab-control__active__color	@text__color	'' \| false \| value	Active tab text color
@_tab-control-text-decoration-active	@tab-control__text-decoration	@tab-control__text-decoration	'' \| false \| value	Active tab text-decoration
@_tab-control-height	@tab-control__height	@indent__l	'' \| false \| value	Height of tab control
@_tab-control-margin-right	@tab-control__margin-right	@indent__xs	'' \| false \| value	Right margin of tab title block
@_tab-control-padding-top	@tab-control__padding-top	@indent__xs	'' \| false \| value	Tab control padding top
@_tab-control-padding-right	@tab-control__padding-right	@indent__base	'' \| false \| value	Tab control padding right
@_tab-control-padding-bottom	@tab-control__padding-bottom	@tab-control__padding-bottom	'' \| false \| value	Tab control padding bottom
@_tab-control-padding-left	@tab-control__padding-left	@tab-control__padding-left	'' \| false \| value	Tab control padding left
@_tab-control-border-width	@tab-control__border-width	@border-width__base	'' \| false \| value	Tab control border width
@_tab-control-border-color	@tab-control__border-color	@border-color__base	'' \| false \| value	Tab control border color
Tab content settings
@_tab-content-background-color	@tab-content__background-color	@tab-control__active__background-color	'' \| false \| value	Tab content background
@_tab-content-border-top-status	@tab-content__border-top-status	false	true \| false	Tab content border top status. When set to 'true' the content has only top border. When set to 'false' the content has all 4 borders
@_tab-content-border	@tab-content__border	@tab-control__border-width solid @tab-control__border-color	'' \| false \| value	Tab content border
@_tab-content-margin-top	@tab-content__margin-top	@tab-control__height + @tab-control__border-width + @tab-control__padding-top + @tab-control__padding-bottom	'' \| false \| value	Tab content top margin (it is the sum of tabs height and top border width)
@_tab-content-padding-top	@tab-content__padding-top	@indent__base	'' \| false \| value	Tab content padding
@_tab-content-padding-right	@tab-content__padding-right	@indent__base	'' \| false \| value	Tab content padding
@_tab-content-padding-bottom	@tab-content__padding-bottom	@tab-content__padding-top	'' \| false \| value	Tab content padding
@_tab-content-padding-left	@tab-content__padding-left	@tab-content__padding-right	'' \| false \| value	Tab content padding

Tabs with content top border

To set up tabs with only top content border use variable:

  @_tab-content-border: true

  <dl class="example-sections-2" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#product.info.description">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_tags">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_reviews">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

.example-sections-2 {
    .lib-data-tabs(
        @_tab-content-border-top-status: true
    );
}

Accordion

The .lib-data-accordion() mixin is used to setup accordion parameters. Accordion has the same markup as tabs.

  <dl class="example-sections-3" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#product.info.description">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>
    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_tags">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_reviews">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

.example-sections-3 {
    .lib-data-accordion();
}

Accordion mixin variables

    
        
            Mixin variable
            Global variable
            Default value
            Allowed values
            Comment
        
        
            @_accordion-control-font-family
            @accordion-control__font-family
            @tab-control__font-family
            '' | false | value
            Accordion font family
        
        
            @_accordion-control-font-size
            @accordion-control__font-size
            @font-size__l
            '' | false | value
            Accordion font size
        
        
            @_accordion-control-font-style
            @accordion-control__font-style
            @tab-control__font-style
            '' | false | value
            Accordion font style
        
        
            @_accordion-control-font-weight
            @accordion-control__font-weight
            @tab-control__font-weight
            '' | false | value
            Accordion font weight
        
        
            @_accordion-control-line-height
            @accordion-control__line-height
            @accordion-control__height
            '' | false | value
            Accordion line height
        
        
            Accordion tabs controls settings
        
        
            @_accordion-control-border-top
            @accordion-control__border-top
            @tab-control__border-width solid @tab-control__border-color
            '' | false | value
            Accordion control border
        
        
            @_accordion-control-border-right
            @accordion-control__border-right
            @tab-control__border-width solid @tab-control__border-color
            '' | false | value
            Accordion control border
        
        
            @_accordion-control-border-bottom
            @accordion-control__border-bottom
            @tab-control__border-width solid @tab-control__border-color
            '' | false | value
            Accordion control border
        
        
            @_accordion-control-border-left
            @accordion-control__border-left
            @tab-control__border-width solid @tab-control__border-color
            '' | false | value
            Accordion control border
        
        
            @_accordion-control-background-color
            @accordion-control__background-color
            @tab-control__background-color
            '' | false | value
            Accordion control background
        
        
            @_accordion-control-color
            @accordion-control__color
            @tab-control__color
            '' | false | value
            Accordion control color
        
        
            @_accordion-control-text-decoration
            @accordion-control__text-decoration
            @tab-control__text-decoration
            '' | false | value
            Accordion control text decoration
        
        
            @_accordion-control-color-visited
            @accordion-control__color
            @accordion-control__color
            '' | false | value
            Accordion control visited link color
        
        
            @_accordion-control-text-decoration-visited
            @accordion-control__text-decoration
            @accordion-control__text-decoration
            '' | false | value
            Accordion control visited link text-decoration
        
        
            @_accordion-control-background-color-hover
            @accordion-control__hover__background-color
            @tab-control__hover__background-color
            '' | false | value
            Hovered accordion control background
        
        
            @_accordion-control-color-hover
            @accordion-control__hover__color
            @tab-control__hover__color
            '' | false | value
            Hovered accordion control text color
        
        
            @_accordion-control-text-decoration-hover
            @accordion-control__hover__text-decoration
            @tab-control__hover__text-decoration
            '' | false | value
            Hovered accordion control text-decoration
        
        
            @_accordion-control-background-color-active
            @accordion-control__active__background-color
            @tab-control__active__background-color
            '' | false | value
            Active accordion control background
        
        
            @_accordion-control-color-active
            @accordion-control__active__color
            @tab-control__active__color
            '' | false | value
            Active accordion control text color
        
        
            @_accordion-control-text-decoration-active
            @accordion-control__active__text-decoration
            @tab-control__active__text-decoration
            '' | false | value
            Active accordion control text-decoration
        
        
            @_accordion-control-height
            @accordion-control__height
            @indent__xl
            '' | false | value
            Height of accordion control
        
        
            @_accordion-control-margin-bottom
            @accordion-control__margin-bottom
            @indent__xs
            '' | false | value
            Bottom margin of the accordion control
        
        
            @_accordion-control-padding-top
            @accordion-control__padding-top
            @tab-control__padding-top
            '' | false | value
            Accordion tab control padding top
        
        
            @_accordion-control-padding-right
            @accordion-control__padding-right
            @indent__base
            '' | false | value
            Accordion tab control padding right
        
        
            @_accordion-control-padding-bottom
            @accordion-control__padding-bottom
            @tab-control__padding-bottom
            '' | false | value
            Accordion tab control padding bottom
        
        
            @_accordion-control-padding-left
            @accordion-control__padding-left
            @accordion-control__padding-right
            '' | false | value
            Accordion tab control padding left
        
        
            Accordion content settings
        
        
            @_accordion-content-background-color
            @accordion-content__background-color
            @tab-control__active__background-color
            '' | false | value
            Accordion tab content background
        
        
            @_accordion-content-border
            @accordion-content__border
            @tab-content__border
            '' | false | value
            Accordion tab content border
        
        
            @_accordion-content-margin
            @accordion-content__margin
            0 0 @indent__xs
            '' | false | value
            Accordion tab content margin
        
        
            @_accordion-content-padding
            @accordion-content__padding
            @tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left
            '' | false | value
            Accordion tab content padding

Mixin variable	Global variable	Default value	Allowed values	Comment
@_accordion-control-font-family	@accordion-control__font-family	@tab-control__font-family	'' \| false \| value	Accordion font family
@_accordion-control-font-size	@accordion-control__font-size	@font-size__l	'' \| false \| value	Accordion font size
@_accordion-control-font-style	@accordion-control__font-style	@tab-control__font-style	'' \| false \| value	Accordion font style
@_accordion-control-font-weight	@accordion-control__font-weight	@tab-control__font-weight	'' \| false \| value	Accordion font weight
@_accordion-control-line-height	@accordion-control__line-height	@accordion-control__height	'' \| false \| value	Accordion line height
Accordion tabs controls settings
@_accordion-control-border-top	@accordion-control__border-top	@tab-control__border-width solid @tab-control__border-color	'' \| false \| value	Accordion control border
@_accordion-control-border-right	@accordion-control__border-right	@tab-control__border-width solid @tab-control__border-color	'' \| false \| value	Accordion control border
@_accordion-control-border-bottom	@accordion-control__border-bottom	@tab-control__border-width solid @tab-control__border-color	'' \| false \| value	Accordion control border
@_accordion-control-border-left	@accordion-control__border-left	@tab-control__border-width solid @tab-control__border-color	'' \| false \| value	Accordion control border
@_accordion-control-background-color	@accordion-control__background-color	@tab-control__background-color	'' \| false \| value	Accordion control background
@_accordion-control-color	@accordion-control__color	@tab-control__color	'' \| false \| value	Accordion control color
@_accordion-control-text-decoration	@accordion-control__text-decoration	@tab-control__text-decoration	'' \| false \| value	Accordion control text decoration
@_accordion-control-color-visited	@accordion-control__color	@accordion-control__color	'' \| false \| value	Accordion control visited link color
@_accordion-control-text-decoration-visited	@accordion-control__text-decoration	@accordion-control__text-decoration	'' \| false \| value	Accordion control visited link text-decoration
@_accordion-control-background-color-hover	@accordion-control__hover__background-color	@tab-control__hover__background-color	'' \| false \| value	Hovered accordion control background
@_accordion-control-color-hover	@accordion-control__hover__color	@tab-control__hover__color	'' \| false \| value	Hovered accordion control text color
@_accordion-control-text-decoration-hover	@accordion-control__hover__text-decoration	@tab-control__hover__text-decoration	'' \| false \| value	Hovered accordion control text-decoration
@_accordion-control-background-color-active	@accordion-control__active__background-color	@tab-control__active__background-color	'' \| false \| value	Active accordion control background
@_accordion-control-color-active	@accordion-control__active__color	@tab-control__active__color	'' \| false \| value	Active accordion control text color
@_accordion-control-text-decoration-active	@accordion-control__active__text-decoration	@tab-control__active__text-decoration	'' \| false \| value	Active accordion control text-decoration
@_accordion-control-height	@accordion-control__height	@indent__xl	'' \| false \| value	Height of accordion control
@_accordion-control-margin-bottom	@accordion-control__margin-bottom	@indent__xs	'' \| false \| value	Bottom margin of the accordion control
@_accordion-control-padding-top	@accordion-control__padding-top	@tab-control__padding-top	'' \| false \| value	Accordion tab control padding top
@_accordion-control-padding-right	@accordion-control__padding-right	@indent__base	'' \| false \| value	Accordion tab control padding right
@_accordion-control-padding-bottom	@accordion-control__padding-bottom	@tab-control__padding-bottom	'' \| false \| value	Accordion tab control padding bottom
@_accordion-control-padding-left	@accordion-control__padding-left	@accordion-control__padding-right	'' \| false \| value	Accordion tab control padding left
Accordion content settings
@_accordion-content-background-color	@accordion-content__background-color	@tab-control__active__background-color	'' \| false \| value	Accordion tab content background
@_accordion-content-border	@accordion-content__border	@tab-content__border	'' \| false \| value	Accordion tab content border
@_accordion-content-margin	@accordion-content__margin	0 0 @indent__xs	'' \| false \| value	Accordion tab content margin
@_accordion-content-padding	@accordion-content__padding	@tab-content__padding-top @tab-content__padding-right @tab-content__padding-bottom @tab-content__padding-left	'' \| false \| value	Accordion tab content padding

Responsive tabs

Since tabs and accordion have same markup, they can transform one into other by means of CSS and JavaScript. This can be used for responsive web design. For instance, for mobile version there is an accordion, for desktop version it is transformed to tabs. To implement this approach, use the .lib-data-accordion() mixin for mobile version, and the .lib-data-tabs() mixin for desktop version.

  <dl class="example-sections-4" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#product.info.description">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>
    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_tags">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#product_reviews">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

@media only screen and (max-width: 99999px) {
    .example-sections-4 {
        .lib-data-tabs();
    }
}

@media only screen and (max-width: @screen__m) {
    .example-sections-4 {
        .lib-data-accordion();
    }
}

Tabs Base

The .lib-data-tabs__base() mixin sets basic tabs styles.

  <dl class="example-sections-5" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

.example-sections-5 {
    .lib-data-tabs__base();
}

Accordion Base

The .lib-data-accordion__base() mixin sets basic accordion styles. Data accordion uses the same markup as data tabs.

  <dl class="example-sections-6" data-sections="tabs">
    <dt class="item title active" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Details</a>
    </dt>
    <dd class="item content active" data-section="content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </dd>
    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Tags</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </dd>

    <dt class="item title" data-section="title">
        <a class="switch" data-toggle="switch" href="#">Reviews</a>
    </dt>
    <dd class="item content" data-section="content">
        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </dd>
  </dl>

.example-sections-6 {
    .lib-data-accordion__base();
}