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 .default, this will be the main container for the tabs
By removing .default, it will remove the tabs Navbar default styling.

<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 default">
        <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 default">
    <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="tab1" class="tab-content active p-2">
            <h3>Title 1</h3>
            <p>Lorem ipsum dolor sit amet.</p>
            <a href="#!" class="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="tab-link" data-tab="tab1">Back</a>
            <br>
            <a href="#!" class="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="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>

Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content