JSFiddle - React, Tailwind, and code Playground

by blackhawx

HTML

<div id="box">
 <div class="item"><input id='hide' type="submit" value="hide"/><p>Hello world!</p></div>
</div>

CSS

#box {
padding:0;
margin:0 auto;
height:500px;
width:500px;
border:solid 5px #eee;
position:relative;
}

.item {
padding:0;
margin:0;
position:relative;
top:0;
}

JavaScript

$('#box').click(function() {
      var visible = $('.visible-class');
	  var item = $('.item');

      if (visible.length) {			 
				item.removeClass('visible-class');
        item.animate({opacity:0.75, top:'-=25px'},'slow');
      } else {
			  item.addClass('visible-class');	
        item.animate({opacity:0.25, top:'+=25px'},'slow');
      }
    });