JSFiddle - React, Tailwind, and code Playground

by timspqr

HTML

<div id = 'hide1' class='hide'>HIDE 1 abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd cd abcd</div>

<div id='hide2' class='hide'>HIDE 2 abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd</div>

<div id='hide3' class='hide'>HIDE 3 abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd</div>
<div>

<div id='hide4' class='hide'>HIDE 4 abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd</div>

<div id='hide5' class='hide'>HIDE 5 abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd</div>

<div id='open'>FIXED TEXT open abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd abcd cd abcd cd abcd cd abcd cd abcd</div>

<div class='spandiv'>    
  <span class='hide1'>clickable 1</span>
  <span class='hide2'>clickable 2</span>
  <span class='hide3'>clickable 3</span>
  <span class='hide4'>clickable 4</span>
  <span class='hide5'>clickable 5</span>
</div>

CSS

span {
    width: 100px;
    padding: 10px 10px 10px 10px;
    background-color: blue;
    color: white;
    border-radius: 8px;
    margin-top: 20px;
}
.spandiv {
    width: 500px;
    margin: 20px auto;
}
.hide {
    display:none;
}
div {
    margin:2px;
}
span {
    background:grey;
    cursor:pointer;
}

#open {
    background-color: yellow;
    padding: 20px;
    border-radius: 10px;
}
#hide1 {
    background-color: blue;
    color: white;
    padding: 20px;
    border-radius: 10px;
}
#hide2 {
    background-color: green;
    color: white;
    padding: 20px;
    border-radius: 10px;
}
#hide3 {
    background-color: black;
    color: white;
    padding: 20px;
    border-radius: 10px;
}
#hide4 {
    background-color: red;
    color: white;
    padding: 20px;
    border-radius: 10px;
}
#hide5 {
    background-color: blue;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

JavaScript

$('span').click(function(){
      $( '.hide' ).hide();
      var spanclass = $(this).attr('class');
      $( '#' + spanclass ).toggle( 1000 );
            });