JSFiddle - React, Tailwind, and code Playground

by Taqi_Shah

HTML

<p class="show_hide">Show</p>

<div class="slidingDiv">
Check out 1
</div>

<p class="show_hide">Show</p>
<div class="slidingDiv">
Check out 2
</div>

<p class="show_hide">Show</p>
<div class="slidingDiv">
Check out 3
</div>

CSS

.show_hide{
  background:url(http://img37.imageshack.us/img37/1127/plusminus.png) no-repeat;
  padding-left:20px;  
}

JavaScript

$(function(){ // DOM READY shorthand

    $(".slidingDiv").hide();
	
	$('.show_hide').click(function( e ){
        var SH = this.SH^=1; // "Simple toggler"
        $(this).text(SH?'Hide':'Show')
               .css({backgroundPosition:'0 '+ (SH?-18:0) +'px'})
               .next(".slidingDiv").slideToggle();
	});

});