tabs

You can create tabs easily using Butter Cake Framework without writing too many lines of code.

Example

Title 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Next Tab

Title 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Back Next Tab

Title 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Back

Create a Tab

To create a tab you have to create a div with the class of .tabs, this will be the main container for the tabs.

<div class="tabs">
    ...........
</div>

And Inside this create a container with the class of .tab-nav for navigations,
and create buttons inside the .tab-nav with the class of tab-link and add data-tab="TabID" with tab ID/s

<div class="tabs">
     <div class="tab-nav">
        <button class="tab-link active" data-tab="tab1">Tab link</button>
        <button class="tab-link" data-tab="tab2">Tab link 2</button>
        <button class="tab-link" data-tab="tab3">Tab link 3</button>
    </div>
</div>

Now Inside this you can create the tabs after adding nav, right after .tab-nav, create a div with the class of .tab-container, and now you can add tabs inside it.

NOTE: You can create nav outsite the tab container, just by adding .tab-link and data attribute data-tab="tabID"

NOTE: To Close a tab you can use .tab-close class in a button inside the tab.

<div class="tabs">
    <div class="tab-nav">
        <button class="tab-link active" data-tab="tab1">Tab link</button>
        <button class="tab-link" data-tab="tab2">Tab link 2</button>
        <button class="tab-link" data-tab="tab3">Tab link 3</button>
    </div>

    <div class="tab-container">

        <!-- SINGLE TAB - add .active class to be shown by default -->
       <div id="tab-1" class="tab-content active p-2">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#!" class="btn-primary tab-link" data-tab="tab-2">Next Tab</a>
        </div>

        <!-- SECOND TAB -->
        <div id="tab2" class="tab-content">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#!" class="btn-primary tab-link" data-tab="tab1">Back</a>
            <a href="#!" class="btn-primary tab-link" data-tab="tab3">Next Tab</a>
        </div>

        <!-- THIRD TAB -->
        <div id="tab3" class="tab-content">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#!" class="btn-primary tab-link" data-tab="tab2">Back</a>
        </div>


    </div>
</div>

Tab without Nav

Title 1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Next Tab

Title 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Back Next Tab

Title 3

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda molestiae ab deserunt autem ullam consectetur.

Back
Code Snippet For Above tab
<div class="tabs">
    <div class="tab-container">
        <div id="tab-1" class="tab-content active bg-light p-2">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>

            <a href="#!" class="btn-primary tab-link" data-tab="tab-2">Next Tab</a>
        </div>

        <div id="tab-2" class="tab-content bg-light p-2">
            <h3>Title 2</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>
            <a href="#!" class="btn-primary tab-link" data-tab="tab-1">Back</a>
            <a href="#!" class="btn-primary tab-link" data-tab="tab-3">Next Tab</a>
        </div>

        <div id="tab-3" class="tab-content bg-light p-2">
            <h3>Title 3</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est voluptate odio voluptatem
                quaerat non. Pariatur iure id temporibus cum perspiciatis? Ipsa nulla laudantium assumenda
                molestiae ab deserunt autem ullam consectetur.</p>
            <a href="#!" class="btn-primary tab-link" data-tab="tab-2">Back</a>
        </div>
    </div>
</div>