🍓 Berry CSS 3.0

Компонент tabs1 components

First

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.

Second

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.

<script src="assets/components/tabs1/tabs1.js"></script>

<!-- навигация -->
<div>
    <button class="button tab-nav bg-blue400 t-white" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group', 'first')">First</button>
    
    <button class="button tab-nav" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group', 'second')">Second</button>
</div>

<!-- табы -->
<div id="tab-group">
    <div id="first" class="tab-content animation-fade bordered pad20">
        <h2>First</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.</p>
    </div>

    <div id="second" class="tab-content b-hide animation-fade bordered pad20">
        <h2>Second</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.</p>
    </div>
</div>

Lorem ipsum dolor sit amet

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Lorem ipsum dolor sit amet

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

<div class="mar20-tb">
    <button class="button tab-nav" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group2', 'tabA')">First</button>
    <button class="button tab-nav bg-orange" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group2', 'tabB')">Second</button>
</div>

<div id="tab-group2">
    <div id="tabA" class="tab-content b-hide animation-fade">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tabB" class="tab-content animation-fade">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>
</div>

Fade in

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Slide in from left

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Slide in from top

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Slide in from right

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Slide in from bottom

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Zoom in

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

<div class="mar20-tb">
    <button class="button tab-nav bg-red" data-tab-active="bg-red" onclick="tabs1(event, 'tab-group1', 'tab1')">Fade</button>

    <button class="button tab-nav" data-tab-active="bg-pink" onclick="tabs1(event, 'tab-group1', 'tab2')">Left</button>

    <button class="button tab-nav" data-tab-active="bg-orange" onclick="tabs1(event, 'tab-group1', 'tab3')">Top</button>

    <button class="button tab-nav" data-tab-active="bg-blue" onclick="tabs1(event, 'tab-group1', 'tab4')">Right</button>

    <button class="button tab-nav" data-tab-active="bg-green" onclick="tabs1(event, 'tab-group1', 'tab5')">Bottom</button>

    <button class="button tab-nav" data-tab-active="bg-red" onclick="tabs1(event, 'tab-group1', 'tab6')">Zoom</button>
</div>

<div id="tab-group1" class="overflow-hidden">
    <div id="tab1" class="tab-content animation-fade">
        <h2>Fade in</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tab2" class="tab-content b-hide animation-left pos-relative">
        <h2>Slide in from left</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>

    <div id="tab3" class="tab-content b-hide animation-top pos-relative">
        <h2>Slide in from top</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>

    <div id="tab4" class="tab-content b-hide animation-right pos-relative">
        <h2>Slide in from right</h2>
        <p>London is the capital city of England.</p>
        <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    </div>

    <div id="tab5" class="tab-content b-hide animation-bottom pos-relative">
        <h2>Slide in from bottom</h2>
        <p>Paris is the capital of France.</p>
        <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
    </div>

    <div id="tab6" class="tab-content b-hide animation-zoom">
        <h2>Zoom in</h2>
        <p>Tokyo is the capital of Japan.</p>
        <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
    </div>
</div>

First

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.

Second

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.

<div class="flex flex-wrap-tablet">
    <div class="w2col w100-tablet mar20-b">
        <button class="w100 w48-tablet button tab-nav bg-blue400 t-white" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group4', 'tabFirst1')">First</button>

        <button class="w100 w48-tablet button tab-nav" data-tab-active="bg-blue400 t-white" onclick="tabs1(event, 'tab-group4', 'tabSecond1')">Second</button>
    </div>

    <div class="w10col w100-tablet" id="tab-group4">
        <div id="tabFirst1" class="tab-content animation-fade pad20-rl">
            <h2>First</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, fugit.</p>
        </div>

        <div id="tabSecond1" class="tab-content b-hide animation-fade pad20-rl">
            <h2>Second</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur.</p>
        </div>
    </div>
</div>