JSFiddle - React, Tailwind, and code Playground

by Thahir

HTML

<div>
    <input type="button" value="Hide All" id="btn1" />
    <input type="button" value="Hide Col-1" id="btn2" />
    <input type="button" value="Hide Col-2" id="btn3" />
</div>
<div>
    <div class="column1 co">
        <div class="valsDiv">1</div>
        <div class="valsDiv">2</div>
        <div class="valsDiv">3</div>
    </div>
    <div class="column2 co">
        <div class="valsDiv">1</div>
        <div id='blueBg' class="valsDiv">2</div>
        <div class="valsDiv">3</div>
    </div>
    <div class="column3 co">
        <div class="valsDiv">1</div>
        <div class="valsDiv">2</div>
        <div class="valsDiv">3</div>
    </div>
</div>

CSS

.column1 .valsDiv{
    color: #dd0017;
}
.column2 .valsDiv{
    color: green;
    background-color: red;
}
.column3 .valsDiv{
    color: white;
    background-color: green;
}
.column1 > div, .column2 > div, .column3 > div{
    padding: 5px 30px;
    font-size: 12px;
    border: 1px solid #D5D5D5;
}
.column1, .column2, .column3{
    float: left;
}
#btn1 {
    color: red;
}

JavaScript

function btn1CLicked() {
  var dMyBtn1 = document.getElementById("btn1");
  var dMyBtn2 = document.getElementById("btn2");
  var dMyBtn3 = document.getElementById("btn3");
//  alert( dMyBtn1.value );
//  dMyBtn1.value = "Saa";
    if ( dMyBtn1.value == "Hide All" ) {
        hideAll();
      dMyBtn1.value = "Show All";
      dMyBtn2.value = "Show Col-1";
      dMyBtn3.value = "Show Col-2";
    }
    else{
        showAll();
        dMyBtn1.value = "Hide All";
        dMyBtn2.value = "Hide Col-1";
        dMyBtn3.value = "Hide Col-2";
    }
}
function btn2CLicked() {
  var dMyBtn2 = document.getElementById("btn2");  

    if ( dMyBtn2.value == "Hide Col-1" ) {
        hideCol1();
      dMyBtn2.value = "Show Col-1";
    }
    else{
        showCol1 ();
        dMyBtn2.value = "Hide Col-1";
    }
}
function btn3CLicked() {
  var dMyBtn3 = document.getElementById("btn3");  

    if ( dMyBtn3.value == "Hide Col-2" ) {
        hideCol2();
      dMyBtn3.value = "Show Col-2";
    }
    else{
        showCol2 ();
        dMyBtn3.value = "Hide Col-2";
    }
}
function hideAll () {
  $(".co").hide();
}
function showAll () {
    $(".co").show();
}

function hideCol1 () {
  $(".column2").hide();
}
function showCol1 () {
  $(".column2").show();
}

function hideCol2 () {
  $(".column3").hide();
}
function showCol2 () {
  $(".column3").show();
}


$(function() {
$("#btn1").click(function () {
  btn1CLicked.apply( this, arguments);
});
$("#btn2").click(function () {
  btn2CLicked.apply( this, arguments);
});
$("#btn3").click(function () {
  btn3CLicked.apply( this, arguments);
});
    var myDomEl = document.getElementById("blueBg");
    console.log("Lets see the dom object ");
    console.log( myDomEl );
    console.log("Lets see the style property");
    console.log( myDomEl.style );
    console.log("Lets see the backgroundColor property of style object");
    console.log( myDomEl.style.backgroundColor );
    
    
    
});