Different Examples to Hide / Show using JS

HTML

<button class="myBtn">show and hide div</button>
<div id="" class="elem divClass1"></div>
<div id="" class="elem divClass2 showmeClass"></div>
<div id="divId" class="elem divClass3"></div>
<div id="" class="elem divClass4"></div>
<div id="" class="elem divClass5"></div>
<div id="" class="elem divClass6"></div>

CSS

.elem{
    width:300px;
    height:300px;   
}

.divClass1{
    background:red;
}
.divClass2{
    background:blue;
}
.divClass3{
    background:green;
}
.divClass4{
    background:orange;
}
.divClass5{
    background:black;
}
.divClass6{
    background:yellow;
}
.hidemeClass{
  display:none;
}

.showmeClass{
  display:block;
}

JavaScript

jQuery(".myBtn").click(function () {

  //Simple toggle
  jQuery('.divClass1').toggle();
  

  //OR use a toggle between classes. Of course you would have to add: .hidemeClass{display:none;}.showmeClass{display:block;} to your stylesheet and the element should have atleast the default class.
  jQuery('.divClass2').toggleClass('hidemeClass showmeClass');



  //OR let's use a toggle with a case statement
  jQuery(this).toggleClass('hidediv');
  
  if (jQuery(this).hasClass('hidediv')){


    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:none;"; //display:unset or :initial


    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:none');
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','none');
    //display:unset or :initial


    //or using builtin hide()
    jQuery('.divClass6').hide();

  }else{

    //using Plain Javascript
    const el= document.getElementById("divId");
    el.style = "display:block;"; //display:unset or :initial

    //or using Attr()
    jQuery('.divClass4').attr('style', 'display:block'); 
    //display:unset or :initial

    //or using css()
    jQuery('.divClass5').css('display','block');
    //display:unset or :initial


    //or using builtin show()
    jQuery('.divClass6').show();

  }


});