JSFiddle - React, Tailwind, and code Playground

by Thahir

HTML

<div>
    <input type="button" value="Hide All" id="btn1" />
</div>
<div>
    <div class="column1">
        <div class="valsDiv">1</div>
        <div class="valsDiv">2</div>
        <div class="valsDiv">3</div>
    </div>
    <div class="column2">
        <div class="valsDiv">1</div>
        <div class="valsDiv">2</div>
        <div class="valsDiv">3</div>
    </div>
</div>

CSS

.column1{
    float: left;
}
.column1 > div, .column2 > div{
    padding: 5px 30px;
    font-size: 12px;
    border: 1px solid #D5D5D5;
}
.column2{
    float: left;
}
#btn1 {
    color: red;
}
#btn2{
    display: none;
}

JavaScript

function btn1CLicked() {
  var dMyBtn1 = document.getElementById("btn1");  
//  alert( dMyBtn1.value );
//  dMyBtn1.value = "Saa";
    if ( dMyBtn1.value == "Show All" ) {
        showAll();
      dMyBtn1.value = "Hide All";
    }
    else{
        hideAll();
        dMyBtn1.value = "Show All";
    }
}
function hideAll () {
  $(".valsDiv").hide();
}
function showAll () {
    $(".valsDiv").show();
}
function btn2CLicked() {
  var dMyBtn2 = document.getElementById("btn2");
    var dMyBtn1 = document.getElementById("btn1");
    dMyBtn1.style.display = "block";
    dMyBtn2.style.display = "none";

}


$(function() {
$("#btn1").click(function () {
  btn1CLicked.apply( this, arguments);
});
    $("#btn2").click(function () {
  btn2CLicked.apply( this, arguments);
});
});