JSFiddle - React, Tailwind, and code Playground

by yeyene

HTML

<a class="show_hide" target="slidingDiv1">Show</a>
<div id="slidingDiv1" class="slidingDiv">
    Check out 1
</div>
<a class="show_hide" target="slidingDiv2">Show</a>
<div id="slidingDiv2" class="slidingDiv">
    Check out 2
</div>
<a class="show_hide" target="slidingDiv3">Show</a>
<div id="slidingDiv3" class="slidingDiv">
    Check out 3
</div>

CSS

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

.slidingDiv{display:none;float:left;width:100%; }

JavaScript

$(document).ready(function(){ 
    $('.show_hide').on('click',function(){
        $('.show_hide').text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:0) +'px'});
        $(".slidingDiv").slideUp(100);
        $('#'+$(this).attr('target')).slideDown(300);
        var isShow = $(this).text() == 'Show';
        $(this).text(isShow ? 'Hide' : 'Show').css({backgroundPosition:'0 '+ (isShow?-18:10) +'px'});
    });
});