JSFiddle - React, Tailwind, and code Playground

by kasdega

HTML

<form>
    <span class="label">Is Started:</span>
    <input id="isStarted" type="checkbox" name="isStarted" class="toggler" value="1"/>
    <div id="isStarted1" class="start-hidden">Checkbox is checked</div>   
    <br/>    
    <span class="label">Is Done:</span>
    <input id="isDone" type="checkbox" name="isDone" class="toggler" value="1" checked="checked"/>
    <div id="isDone1" class="start-hidden">Checkbox is checked</div>
    <br/>   
    <span class="label">Text Input:</span>
    <input id="textInput" type="text" name="textInput" class="toggler"/>
    <div id="textInput1" class="start-hidden">There is a value in the input</div>
    <br/>   
    <span class="label">Another Text Input:</span>
    <input id="anotherTextInput" type="text" name="anotherTextInput" class="toggler" value="Input text here"/>
    <div id="anotherTextInput1" class="start-hidden">There is a value in the input</div>

</form>

CSS

.label {
    margin-right: 5px;
}

.start-hidden {
    display: none;
    color: #e29898;
}

JavaScript

$(".toggler").each(function() {
    var me = $(this);
    var myId = me.attr("id");
    var myDivId = "#"+myId+"1";
    
    if(me.is(":checkbox")) {
        //check the initial state of the checkbox
        if(me.is(":checked")) $(myDivId).show();
        
        // show/hide the div on clicking
        $("#"+myId).live('click', function() {
            $(myDivId).toggle();
        });
    } else {
        // check the initial state of the input
        if($.trim(me.val().length) > 0) {
            $(myDivId).toggle();
        }
        
        // if the state changes show the div
        $("#"+myId).live('change', function() {
            if($.trim($(this).val().length) > 0) {
                $(myDivId).show();
            } else {
                $(myDivId).hide();
            }
        });
    }
});