KSS Style Guide

<insert-markup>organisms.accordion-</insert-markup>
.-layout-horizontal-right
right tabs
<insert-markup>organisms.accordion-0</insert-markup>
Markup: ..\..\styleguide\templates\organisms\accordion.html
<div class="rocksite-o-accordion [modifier class]" data-active-element="0"
     role="tablist">
    <div class="rocksite-o-accordion__header-wrapper -active" role="tab"
         id="ui-id-4" aria-controls="ui-id-5" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="rocksite-o-accordion__header-wrapper__header">
            <a href="#" class="rocksite-o-accordion__header-wrapper__header__link">
                <span class="rocksite-o-accordion__header-wrapper__header__link__title">Tab Name 1</span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-active"><i class="las la-plus"></i></span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-passive"><i class="las la-minus"></i></span>
            </a>
    </span>
    </div>
    <div class="rocksite-o-accordion__content -active ui-tabs-active"
         id="ui-id-5" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="true">Fusce sit amet accumsan ipsum, condimentum pulvinar lacus. Vestibulum ante tellus, feugiat sit amet ornare quis, venenatis quis turpis. Praesent id eros enim. Vestibulum quis purus nec lectus tristique rutrum.
    </div>
    <div class="rocksite-o-accordion__header-wrapper " role="tab"
         id="ui-id-4" aria-controls="ui-id-5" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="rocksite-o-accordion__header-wrapper__header">
            <a href="#" class="rocksite-o-accordion__header-wrapper__header__link">
                <span class="rocksite-o-accordion__header-wrapper__header__link__title">Tab Name 2</span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-active"><i class="las la-plus"></i></span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-passive"><i class="las la-minus"></i></span>
            </a>
    </span>
    </div>
    <div class="rocksite-o-accordion__content u-hidden"
         id="ui-id-5" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="true">Phasellus fringilla finibus nibh, sit amet pharetra lorem lacinia at. Aenean vel nisl eget sapien pulvinar sollicitudin sit amet eu lacus. Maecenas accumsan finibus imperdiet. Praesent feugiat congue massa porttitor posuere.
    </div>
    <div class="rocksite-o-accordion__header-wrapper " role="tab"
         id="ui-id-4" aria-controls="ui-id-5" aria-selected="false" aria-expanded="false" tabindex="-1">
        <span class="rocksite-o-accordion__header-wrapper__header">
            <a href="#" class="rocksite-o-accordion__header-wrapper__header__link">
                <span class="rocksite-o-accordion__header-wrapper__header__link__title">Tab Name 3</span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-active"><i class="las la-plus"></i></span>
                <span class="rocksite-o-accordion__header-wrapper__header__link__icon is-passive"><i class="las la-minus"></i></span>
            </a>
    </span>
    </div>
    <div class="rocksite-o-accordion__content u-hidden"
         id="ui-id-5" aria-labelledby="ui-id-4" role="tabpanel" aria-hidden="true">Quisque vitae metus eleifend, suscipit leo a, varius ligula. Mauris vehicula id ante a consequat. Vestibulum sed consectetur purus. Fusce accumsan at nisi nec faucibus. In sed tristique urna. Vestibulum egestas, erat quis dignissim rutrum, mauris dui facilisis metus, eget tincidunt tortor turpis vitae sapien. Vestibulum dignissim tincidunt porta. Praesent tellus nulla, ornare imperdiet mollis sed, egestas nec erat.
    </div>
</div>
Source: ../source/scss/components/organisms/_accordion.scss, line 1