JSFiddle - React, Tailwind, and code Playground

by Denise Nepraunig

HTML

<div id="d1">
    <button type="button" id="b1">hide</button>
        <div>
    <input type="text" value="Denise1">
    <input type="text" value="Denise2">
    <input type="text" value="Denise3">
    <input type="text" value="Denise4">
        </div>
    </div>
    <div id="d2">
    <button id="b2">hide</button>
        <div>
    <input type="text" value="Denise5">
    <input type="text" value="Denise6">
    <input type="text" value="Denise7">
    <input type="text" value="Denise8">
        </div>
    </div>

CSS

input {
    
     display: block; 
}

div {
    float: left;
    width: 250px
    
}

JavaScript

$("button").click(function() {
    //event.preventDefault();
    console.log($(this));
    var buttonid = $(this).attr('id');
    var action = $(this).html();
    console.log(action);
    console.log(buttonid);
    if(action == "hide") {
        //$(this).html("show");
        $(this).html("show");
        switch(buttonid) {
            case "b1": 
                $("#d1 div").hide();
                break;
            case "b2": 
                $("#d2 div").hide(); 
                break;
        }
        } else {
        $(this).html("hide");
        switch(buttonid) {
//            
            case "b1": 
                $("#d1 div").show(); 
                break;
            case "b2": 
                $("#d2 div").show(); 
                break;
    }
        }
    //alert("Hello World!");
});