JSFiddle - React, Tailwind, and code Playground

by Silambarasan_sundaram

HTML

<div id="toggler">
    <div class="wrapper">
        <div class="pager">
            <a href="#one">One</a>
            <a href="#two">Two</a>
            <a href="#three">Three</a>
        </div>
        
        <div class="content" id="one">Content 1</div>
        <div class="content" id="two">Content 2</div>
        <div class="content" id="three">Content 3</div>
    </div>
</div>

CSS

div {overflow:hidden;}
#toggler { width: 500px; margin:13% auto 0; background:#eee; font-family:Helvetica; font-weight:100; overflow:hidden; position:relative; box-shadow:0px 0px 8px #ccc;}
#toggler .wrapper { position:relative; height:100%;}
#toggler .pager > a { color:#fff; text-transform:uppercase; float:left; text-decoration:none; margin-right:1px; display:block; background:#666; padding:10px 20px; }
#toggler .content { width:100%; height:300px; text-align:center; font-size:40px; line-height:7em; color:#666; font-weight:bold;}
.js #toggler { height: auto; }
#one { background:#eee;}
#two { background:#ddd;}
#three { background:#ccc;}
.selected{background:red !important;}

JavaScript

/* CREATED BY SHIVAM BHALLA */

(function($) {
    $('body').addClass('js');
    
    var $toggler = $('#toggler'),
        $wrapper = $toggler.find('.wrapper'),
        $pager = $toggler.find('.pager'),
        $content = $toggler.find('.content');
    
    $toggler.css('height', $content.height() + $pager.height());
    $wrapper.css('top', $content.height());
    $content.hide();
    
    $pager.find('a').on('click', function(e) {
        var $this = $(this),
            $target =  $( $(this).attr('href') ),
            $count = 0;
        
        if ($count === 0) {
            $wrapper.animate({'top' : 0});
            $count = 1;
            $this.addClass('selected');
        } 
        if ($target.hasClass('active')) {
            $('.selected').removeClass('selected');
            $wrapper.animate({'top' : $content.height()}, function() {
                $target.hide().removeClass('active');
            });
        } else {
            $wrapper.find('.active').slideUp().removeClass('active');
            $target.addClass('active').slideDown();
            $('.selected').removeClass('selected');
            $this.addClass('selected');
        }       
        
        e.preventDefault();            
    });
    
   
   
})(jQuery);