JSFiddle - React, Tailwind, and code Playground

by Ivo Tanev

HTML

<section id="section" class="container-fluid content-holder">
    <div class="tabs-row row">
        <div class="col-sm-3 text-center generic-tab tab-knowledge"><span class="btn btn-success">Skills</span></div>
        <div class="col-sm-3 text-center generic-tab tab-work"><span class="btn btn-success">Work</span></div>
        <div class="col-sm-3 text-center generic-tab tab-motiv"><span class="btn btn-success">Motivation</span></div>
        <div class="col-sm-3 text-center generic-tab tab-contact"><span class="btn btn-success">Contact</span></div>
    </div>
    <div class="container-fluid">
        <hr/>
        <div class="tab-content row">
            <!-- jQuery loaded content -->
        </div>
    </div>
</section>

CSS

#section {
    background-color: #ccc;
}
.generic-tab {
    display: inline-block;
    margin: 15px;
    padding: 10px;
    border: 1px solid;
    cursor: pointer;
}

JavaScript

var $contentHolder = $('.tab-content');

var content = (function() {
    function load(path) {
        var currentHeight = $contentHolder.height();
        $contentHolder.css({height: currentHeight, overflow: 'hidden'});
        $contentHolder.load(path, function() {
            $contentHolder.stop();
            
            function animateHeight() {
                var loadedContentHeight =
                    $contentHolder.css('height', 'auto').height();
                $contentHolder.height(currentHeight);
                $contentHolder.animate({
                    height: loadedContentHeight
                }, 800, 'linear');
            }
            animateHeight();
            
            // Wait for a while. To get correct height the browser
            // need to render the images first.
            // setTimeout(animateHeight, 300);
            // ^-- This not working well
        });
    }
    
    return {
        load: load
    }
}());

var controller = (function() {
    function activeTab(tab) {
        var $tab = $(tab);
        $('.generic-tab').removeClass('active');
        $tab.addClass('active');
    }
    
    $('.tab-knowledge').on('click', function() {
        content.load('http://ifch0o1.github.io/temp/kn.html');
    });
    $('.tab-work').on('click', function() {
        content.load('http://ifch0o1.github.io/temp/work.html');
    });
    $('.tab-motiv').on('click', function() {
        content.load('http://ifch0o1.github.io/temp/motiv.html');
    });
    $('.tab-contact').on('click', function() {
        content.load('http://ifch0o1.github.io/temp/contact.html');
    });
    
    content.load('http://ifch0o1.github.io/temp/kn.html');
}());