JSFiddle - React, Tailwind, and code Playground

by Revil CV

HTML

<button class="button1">
Show Div Element
</button>
<div class="div">
I am Div Element
</div>

<br><br>

<button class="button2">
Show Section Element
</button>
<section class="section">
I am Section Element
</section>

CSS

html,body{
  background-color:#fafafa;
  width:100%;
  height:100%;
  padding:12px;
  margin:0;
}
.button1{
  background-color:pink;
  position:relative;
  display:inline-block;
  padding:8px;
  border:none;
  margin:0 0 6px 0;
  cursor:pointer;
}
.div{
  background-color:hotpink;
  display:none;
  width:160px;
  height:160px;
}


.button2{
  background-color:green;
  position:relative;
  display:inline-block;
  padding:8px;
  color:white;
  border:none;
  margin:0 0 6px 0;
  cursor:pointer;
}
.section{
  background-color:darkgreen;
  display:none;
  width:160px;
  height:160px;
  color:white;
}

JavaScript

$(function(){

	$(".button1").click(function(event){
  	event.stopPropagation();
    if($(".div").css("display") == "none"){
    	$(".div").css("display","block");
    }else{
    	$(".div").css("display","none");
    }
  });
  
  $(".button2").click(function(event){
  	event.stopPropagation();
    if($(".section").css("display") == "none"){
    	$(".section").css("display","block");
    }else{
    	$(".section").css("display","none");
    }
  });
  
  $(document).click(function(){
  	$(".div").css("display","none");
  	$(".section").css("display","none");
  });

});