JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div class="boxset">
    <div class="box_header">  
        h1  
    </div>
    <div class="box">
        This is some text for box 1.
    </div>
</div>

<div class="boxset">
    <div class="box_header">  
        h2  
    </div>
    <div class="box">
        This is some text for box 2.
    </div>
</div>

<div class="boxset">
    <div class="box_header">  
        h3  
    </div>
    <div class="box">
        This is some text for box 3.
    </div>
</div>

CSS

.boxset {
    float: left;
}

.box_header {
    width: 40px;
    height: 200px;
    cursor: pointer;
    background: #39F;
    float: left;
}

.box {
    background: #09C;
    width: 300px;
    height: 200px;
    display: none;
    float: left;
}

JavaScript

$('.box_header').bind("click", function() {
    $('.box').animate({
        'width': 'hide'
    });
    $(this).next().animate({
        'width': 'show'
    });
});