JSFiddle - React, Tailwind, and code Playground

by crislivinitup

HTML

<div id='largeCont'>
    
<div class='numField' href="#stage1Cont">1</div>

<div id='stage1Cont' class='stageCont'>
    <br><h3>stage1</h3>
    <div id='stage1Body' class='stageBody'>
Content here
    </div></div>
    
<div class='numField' href="#stage2Cont">2</div>

<div id='stage2Cont' class='stageCont'>
<br>
<h3>stage2</h3><div id='stage2Body' class='stageBody'>
Content here
    </div></div>
    
<div class='numField' href="#stage3Cont">3</div>

<div id='stage3Cont' class='stageCont'>
<br>
<h3>stage3</h3>
<div id='stage3Body' class='stageBody'>
Content here
    </div></div>

CSS

#largeCont {
   position: relative;         
}

div.stageBody {
    position: relative;
    float: left;
    padding: 2px;
    margin: 2px;

    width: 100px;
    height: 200px;
    background: #ababab;
    
    zoom:1;
}

div.stageCont {
    position: relative;
    float: left;
    padding: 2px;
    margin: 2px;    
    height: 200px;
    
    zoom:1;
}

#stage2Cont {
    position: relative;
    float: left;
}

.numField {
    position: relative;
    padding: 4px 12px 4px 12px;
    margin: 1px;
    float: left;
    border: thin;
    border-style: solid;
    border-color: purple;
    border-width: 5px;
    text-align: center;
    font-weight: bold;
    font-family: "Comic Sans MS", cursive;
    font-size: 20px;
    cursor: pointer;
    
    border-radius: 80px;
    
    background: #ababab;
    background: #FF0;
}

h3 {
    padding: 2px;
    margin: 2px;
    border: thin;
    border-style: solid;
    border-color: grey;
    border-width: 2px;
    border-radius: 10px;
    
    padding: 6px 3px 10px 6px;
    color:#FFF;
    
    background: #00c0f0;
    zoom: 1;
}

JavaScript

$(document).ready(function () {
    $(".numField").bind("click",function () {
        
        //this will retrieve the stageCont with the associated numField
        var target = $($(this).attr('href'));
        
        //find the siblings of the clicked element
        var others = target.siblings().filter(function() {
              return ($(this).hasClass('numField') === false);
        });

        //if element is not the active element...
        if (!$(this).hasClass('active')) {
           
        var stageBtns = $(".numField");   //get list of the buttons
        
        
        //hide each stageBody of the non-active elements
        others.each(function(index, self) {
                    //remove the Class of the associated numField
                        //.prev() to get the adjacent element
                    $(this).prev().removeClass('active');
                    
/*********************Commented out because does not work on JsFiddle
                    //slide close the sibling stages
                    $(this).hide("slide", {direction: "left"}, 700 );
            */
                     $(this).hide();
        });

        //set the numField active
        $(this).addClass('active');
        
        
/*********************Commented out because does not work on JsFiddle
        window.setTimeout( function () {
        //show the target
        target.show("slide", {direction: "left"}, 700);
        }, 700);
*/
         target.show(); //this is the simpler code that will work   
    }
        
    });
  $('#stage2Cont').hide();
  $('#stage3Cont').hide();
});