JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div id="container">
    <div id="test" class="visible">Test</div>
    <div id="test1" class="visible">Tests</div>
</div>

CSS

.toggle{
    cursor:pointer; 
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.toggle:hover{
    text-decoration:underline;    
}

.toggle > .show,.toggle > .hide{
    width:15px;
    display:block;
    float:left;
}

.visible{
	visibility:visible;
}

.invisible{
	visibility:hidden;
    overflow:hidden;
    height:0px;
}

JavaScript

/* show/hide using visiblity and simple initilisation - Assetinfo - Dashboard system.
*  author: Graham Dixon
*  email: [email protected]
*/

(function($) {

    $.showhide = function(element, option) {

        var showhide = this;       
            showhide.settings = {};
        
        var $element = $(element),
            element = $element[0];
        
        var defaults = {
            showText: '+',
            hideText: '-',
            toggleAt: 'toggle-',
            hideArea: 'block-',
            toggleText: ''
        };
                
        showhide.init = function(option) {
            showhide.settings = $.extend({}, defaults, option);
            showhide.settings['id'] = $element.attr("id");
              
            placeToggle();
            placeBlock();
            showhide.hide();

            overrideNodeMethod("hide", function(){ return showhide.hide(); });
            overrideNodeMethod("close", function(){ return showhide.hide(); });
            overrideNodeMethod("show", function(){ return showhide.show(); });
            overrideNodeMethod("open", function(){ return showhide.show(); });
            
            return $element;
        };

        showhide.show = function(){
            showhide.settings['ackblock']
                .removeClass("invisible")
                .addClass("visible");
                              
            showhide.settings['acktoggle']
                .html((showhide.settings['toggleText']!=="" ? showhide.settings['toggleText'] : ""))
                .prepend("<span class=\"hide\">"+showhide.settings['hideText']+"</span>");
            
            return $element;
        };
      
        showhide.hide = function(row, node){
            showhide.settings['ackblock']
                .removeClass("visible")
                .addClass("invisible");
            
            showhide.settings['acktoggle']
                .html((showhide.settings['toggleText']!=="" ?...