JSFiddle - React, Tailwind, and code Playground

by aquadk

HTML

<form id="mySearchForm">
    <div class="SearchSec"> <span class="FormTitel">Input test</span>
 <span class="FormInput"><input /></span>

    </div>
    <div class="SearchSec SearchSecAutoHide"> <span class="FormTitel">Input test</span>
 <span class="FormInput"><input value="ggggg" minitext="minitext" /></span>

    </div>
    <div class="SearchSec"> <span class="FormTitel">checkbox test</span>
 <span class="FormInput"><input type="checkbox" value="ggggg" /></span>

    </div>
    <div class="SearchSec"> <span class="FormTitel">checkbox test</span>
 <span class="FormInput"><input type="checkbox" value="ggggg" minitext="bla bla" checked /></span>

    </div>
    <div class="SearchSec"> <span class="FormTitel">radio test</span>
 <span class="FormInput"><input type="radio" name="radiotest" value="radiotest1" minitext="radiotest1 checked" checked />
      <input type="radio" name="radiotest" value="radiotest2" minitext="radiotest2 checked" />
      </span>

    </div>
    <div class="SearchSec"> <span class="FormTitel">Select test</span>
 <span class="FormInput"><select name="selecttest" minitext=""><option Value="" /><option Value="Option 1">Option 1</option></select>
        
        </span>

    </div>
    <div class="SearchSec"> <span class="FormTitel">Input table test</span>
 <span class="FormInput">
     <table>
         <tr>
             <td>Row 1
             </td>
             <td><input name="row1" value="" minitext="Row 1" />
             </td>
         </tr>
         <tr>
             <td>Row 2
             </td>
             <td><input name="row2" value="" minitext="Row 2" />
             </td>
         </tr>                  <tr>
             <td>Row 3
             </td>
             <td><input name="row3" value="input 3" minitext="Row 3" />
             </td>
         </tr>    
     </table>
        </span>

    </div>
    <div style="width:100%;float:left">
        <input class="button" type="button"...

CSS

.SearchSec {
            margin: 4px;
            float: left;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            background-color:#dedede;
            min-height:28px;
        }
        .FormTitel {
            float: left;
            width: 120px;
            min-height:20px;
        }
        .FormInput {
            float: left;
            min-width:250px;
        }
        .SearchSecHide {
            font-size:12px;
        }
        .SearchSecHide .FormInput {
        }
        .SearchSecHide .FormTitel {
            width: auto;
            padding:2px;
            margin:2px;
        }
        .FormInputHide {
            display: none;
        }
        .miniinput {
            padding:2px;
            margin:2px;
            background-color: #f0f0f0;
            float:left;
        }

JavaScript

// Log util
var db = function () {
    'console' in window && console.log.call(console, arguments);
};

(function ($) {

    // apply methods  
    $.fn.minimizeform = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.minimizeform');
        }
    };

    $.fn.minimizeform.defaultSettings = {
        FormTitel: '.FormTitel',
        SearchSection: '.SearchSec',
        SSH: 'SearchSecHide'
    };
    
    function o(t) {
        return $(t).data("settings");
    }
    
    var methods = {

        // init() method
        init: function (options, callback) {

            var o = $.extend($.fn.minimizeform.defaultSettings, options);
            $(this).data("settings", o);

            db('init', this); // Time to Log in console
            // FormTitel is clicked        
            var obj = $(this);
            $(o.FormTitel).live('click', function () {
                var pParent = $(this).parent(o.SearchSection);
                obj.minimizeform('ShowHideFormElem', pParent);
            });

            // return        
            return this.each(function () {
                db('return', obj); // Time to Log in console            
                obj.find('.SearchSecAutoHide').each(function () {
                    db('autohide', this); // Time to Log in console
                    obj.minimizeform('hideFormElem', this);
                });
            });
        },
        hideform: function () {
            var obj = $(this);
            db('hideform', obj); // Time to Log in console
            $(this).children(o(this).SearchSection).each(function () {
                obj.minimizeform('hideFormElem', this);
            });
        },
        showform: function ()...