# 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
                Default value
                Allowed values
                Comment

                @_tab-control-font-family
                false
                '' | false | value
                Tabs font family

                @_tab-control-font-size
                @font-size__base
                '' | false | value
                Tabs font size

                @_tab-control-font-weight
                @font-weight__semibold
                '' | false | value
                Tabs font weight

                @_tab-control-font-style
                false
                '' | false | value
                Tabs font style

                @_tab-control-line-height
                @tab-control__height
                '' | false | value
                Tabs line height

                Tabs controls settings

                @_tab-control-background-color
                @panel__background-color
                '' | false | value
                Current tab background

                @_tab-control-color
                @link__color
                '' | false | value
                Current tab text color

                @_tab-control-text-decoration
                none
                '' | false | value
                Current tab text-decoration

                @_tab-control-background-color-hover
                lighten(@tab-control__background-color, 5%)
                '' | false | value
                Hovered tab background

                @_tab-control-color-hover
                @tab-control__color
                '' | false | value
                Hovered tab text color

                @_tab-control-text-decoration-hover
                @tab-control__text-decoration
                '' | false | value
                Hovered tab text-decoration

                @_tab-control-background-color-active
                lighten(@tab-control__background-color, 15%)
                '' | false | value
                Active tab background

                @_tab-control-color-active
                @text__color
                '' | false | value
                Active tab text color

                @_tab-control-text-decoration-active
                @tab-control__text-decoration
                '' | false | value
                Active tab text-decoration

                @_tab-control-height
                @indent__l
                '' | false | value
                Height of tab control

                @_tab-control-margin-right
                @indent__xs
                '' | false | value
                Right margin of tab title block

                @_tab-control-padding-top
                @indent__xs
                '' | false | value
                Tab control padding top

                @_tab-control-padding-right
                @indent__base
                '' | false | value
                Tab control padding right

                @_tab-control-padding-bottom
                @tab-control__padding-bottom
                '' | false | value
                Tab control padding bottom

                @_tab-control-padding-left
                @tab-control__padding-left
                '' | false | value
                Tab control padding left

                Tab content settings

                @_tab-content-background-color
                @tab-control__active__background-color
                '' | false | value
                Tab content background

                @_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-control__border-width solid @tab-control__border-color
                '' | false | value
                Tab content border

                @_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
                @indent__base
                '' | false | value
                Tab content padding

                @_tab-content-padding-right
                @indent__base
                '' | false | value
                Tab content padding

                @_tab-content-padding-bottom
                @tab-content__padding-top
                '' | false | value
                Tab content padding

                @_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
                Default value
                Allowed values
                Comment

                @_accordion-control-font-family
                @tab-control__font-family
                '' | false | value
                Accordion font family

                @_accordion-control-font-size
                @font-size__l
                '' | false | value
                Accordion font size

                @_accordion-control-font-style
                @tab-control__font-style
                '' | false | value
                Accordion font style

                @_accordion-control-font-weight
                @tab-control__font-weight
                '' | false | value
                Accordion font weight

                @_accordion-control-line-height
                @accordion-control__height
                '' | false | value
                Accordion line height

                Accordion tabs controls settings

                @_accordion-control-border-top
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-right
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-bottom
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-border-left
                @tab-control__border-width solid @tab-control__border-color
                '' | false | value
                Accordion control border

                @_accordion-control-background-color
                @tab-control__background-color
                '' | false | value
                Accordion control background

                @_accordion-control-color
                @tab-control__color
                '' | false | value
                Accordion control color

                @_accordion-control-text-decoration
                @tab-control__text-decoration
                '' | false | value
                Accordion control text decoration

                @_accordion-control-color-visited
                @accordion-control__color
                '' | false | value
                Accordion control visited link color

                @_accordion-control-text-decoration-visited
                @accordion-control__text-decoration
                '' | false | value
                Accordion control visited link text-decoration

                @_accordion-control-background-color-hover
                @tab-control__hover__background-color
                '' | false | value
                Hovered accordion control background

                @_accordion-control-color-hover
                @tab-control__hover__color
                '' | false | value
                Hovered accordion control text color

                @_accordion-control-text-decoration-hover
                @tab-control__hover__text-decoration
                '' | false | value
                Hovered accordion control text-decoration

                @_accordion-control-background-color-active
                @tab-control__active__background-color
                '' | false | value
                Active accordion control background

                @_accordion-control-color-active
                @tab-control__active__color
                '' | false | value
                Active accordion control text color

                @_accordion-control-text-decoration-active
                @tab-control__active__text-decoration
                '' | false | value
                Active accordion control text-decoration

                @_accordion-control-height
                @indent__xl
                '' | false | value
                Height of accordion control

                @_accordion-control-margin-bottom
                @indent__xs
                '' | false | value
                Bottom margin of the accordion control

                @_accordion-control-padding-top
                @tab-control__padding-top
                '' | false | value
                Accordion tab control padding top

                @_accordion-control-padding-right
                @indent__base
                '' | false | value
                Accordion tab control padding right

                @_accordion-control-padding-bottom
                @tab-control__padding-bottom
                '' | false | value
                Accordion tab control padding bottom

                @_accordion-control-padding-left
                @accordion-control__padding-right
                '' | false | value
                Accordion tab control padding left

                Accordion content settings

                @_accordion-content-background-color
                @tab-control__active__background-color
                '' | false | value
                Accordion tab content background

                @_accordion-content-border
                @tab-content__border
                '' | false | value
                Accordion tab content border

                @_accordion-content-margin
                0 0 @indent__xs
                '' | false | value
                Accordion tab content margin

                @_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 desctop 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 desctop 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();
    }