JSFiddle - React, Tailwind, and code Playground

HTML

<div class=" normal" id="1"
						style="text-align:left;
						top:  13em;
						left: 5em;
						height: 10em; 
						width: 12em;">
						<div class = "wrap reveal">
							<div class = "show">
								<strong>Box 1</strong>			
							</div>
							<div class = "noshow">
								<P>0001: Normal</P>
								<P>0002: online</P>
								<P>0003: online</P>
								<P>0004: online</P>							
							</div>
							
							<div class = "here">
								<P>0001: online</P>
								<P>0002: online</P>
								<P>0003: online</P>
								<P>0004: online</P>							
							</div>
						</div> 						
					</div> <!-- box1 -->

CSS

.wrap {
    outline: 1px dotted blue;
    height: 107px;
    width: 130px;
   
}
.noshow {
	display : none;
	COLOR: #050505;
	font-weight:bold;
	text-align:justify;
	line-height: 1em; 
	font-size:x-small;

}



.here{
	display : none;


}

#click {display: none;}

#click:checked ~ .noshow {
    display: block;
	COLOR: #050505;
	font-weight:bold;
	text-align:justify;
	line-height: 1em; 
	font-size:x-small;
}

#click:checked ~ .show {
    display: none;
	
}

.wrap.reveal:hover .here   {
	
    display: block;
	COLOR: #050505;
	font-weight:bold;
	text-align:justify;
	line-height: 1em; 
	font-size:x-small;
}

JavaScript

$(function() {
    $(document).on('click', function(e) {
        if ( $(e.target).closest('.wrap').length ) {
             $('.show').slideToggle();
            $('.wrap').removeClass('reveal');
            $('.noshow').slideToggle();	
        }else{
            $('.show').slideDown();
            $('.wrap').addClass('reveal');
            $('.noshow').slideUp();
        }
    });
});