JSFiddle - React, Tailwind, and code Playground

by cgtrman

HTML

<a href="#" class="show_hide" id="plus"><span class="ui-icon ui-icon-circle-plus"></span></a>

<div class="slidingDiv" style="display: block;">
Check out the updated jQuery plugin for doing this: <a href="http://papermashup.com/jquery-show-hide-plugin/" class="show_hide" target="_blank" style="display: inline;">jQuery Show / Hide Plugin</a>
</div>

CSS

.show_hide {
    display:none;
}

JavaScript

$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       //$("#plus").text("-");
       $("#plus").html('<span class="ui-icon ui-icon-circle-minus">');
       $(".slidingDiv").slideDown();
       
   },function(){
       //$("#plus").text("+");
       $("#plus").html('<span class="ui-icon ui-icon-circle-plus">');
       $(".slidingDiv").slideUp();
   });
    
});