JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<ul id="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
 </ul>
<div style="clear: both"></div>
<div class="tab-content">
    <div id="tab1" class="tab">
        <h1>Tab 1</h1>
        <p>If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there's a fragment identifier, and load the appropriate content if there is.</p>
    </div>

    <div id="tab2" class="tab">
        <h1>Tab 2</h1>
        <p>If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there's a fragment identifier, and load the appropriate content if there is.</p>
        <p>If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there's a fragment identifier, and load the appropriate content if there is.</p>
        <p>If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then, rather than load the first page, you can check to see if there's a fragment identifier, and load the appropriate content if there is.</p>
    </div>
    
<div id="tab3" class="tab">
        <h1>Tab 3</h1>
        <p>If you instead allow the default action, so that the address bar updates with the fragment, then when the user leaves the page and comes back, the fragment will be preserved in the URL. Then,...

CSS

* { margin: 0; padding: 0; }
body { font-family: arial; }
#tab { margin: 0; padding: 0; }
#tabs li { float: left; display: inline-block; margin-left: 10px; }
#tabs li:first-child { margin-left: 0; }
#tabs li a { list-style: none; display: block; background: #eee; padding: 10px; text-decoration: none; }
#tabs li a:hover { background: #000; color: #fff; }
#tabs li a.current { background: green; }
.tab-content { background: pink; padding: 10px; }

JavaScript

$(document).ready(function(){
    
    var tabs = $('#tabs');
    $('.tab').hide();
    
    tabs.find('a').on('click', function(e){
        e.preventDefault();
        tabs.find('.current').removeClass('current');
        $(this).addClass('current');
        //$(this.hash).show().siblings().hide();
        
        var newTab = $(this.hash);
        alert(newTab)
        var newHeight = newTab.height();
        var content = $('.tab-content');
        
        newTab.siblings(':visible').fadeOut('fast');
        content.animate({'height' : newHeight}, 300, function(){
       	newTab.fadeIn('fast');
        });
        
    }).first().click();
    
    
});