JSFiddle - React, Tailwind, and code Playground

by Randy Owens

HTML

<button id="t0">hide instant</button>
<button id="t1">hide fast</button>
<button id="t4">hide slow</button>
<button id="not">hide unspecified</button>
<hr/>
<form>
    <input type="text" name="text1">plain text</input>
    <br/>
    <input type="password" name="password1">password</input>
    <br/>
    <input type="checkbox" name="checkboxen" value="checkbox1">checkbox</input>
    <br/>
    <input type="radio" name="radio" value="radio1">radio button</input>
    <br/>
    <input type="submit" />
    <input type="reset" />
    <br/>
    <input type="file" name="file1">file</input>
    <br/>
    <input type="image" name="image1" alt="image alt text">image input</input>
    <br/>
    <input type="button">button input</input>
    <br/>
    <textarea name="textarea1"></textarea>
    <hr/>
    <label id="label1">
        <input type="text" name="text2">plain text</input>
        <br/>
        <input type="password" name="password2">password</input>
        <br/>
        <input type="checkbox" name="checkboxen" value="checkbox2">checkbox</input>
        <br/>
        <input type="radio" name="radio" value="radio2">radio button</input>
        <br/>
        <input type="submit" />
        <input type="reset" />
        <br/>
        <input type="file" name="file2">file</input>
        <br/>
        <input type="image" name="image2" alt="image alt text">image input</input>
        <br/>
        <input type="button">button input</input>
        <br/>
        <textarea name="textarea2"></textarea>
    </label>
    <hr/>
    <label id="label2">
        <input type="text" name="text3">plain text</input>
        <br/>
        <input type="password" name="password3">password</input>
        <br/>
        <input type="checkbox" name="checkboxen" value="checkbox3">checkbox</input>
        <br/>
        <input type="radio" name="radio" value="radio3">radio button</input>
        <br/>
        <input type="submit" />
        <input type="reset" />
        <br/>
        <input...

JavaScript

$("button#t0").click(function () {
    $("form > input, form > textarea, #label1, #label2 input, #label2 textarea, p").hide(0);
});
$("button#t1").click(function () {
    $("form > input, form > textarea, #label1, #label2 input, #label2 textarea, p").hide(1);
});
$("button#t4").click(function () {
    $("form > input, form > textarea, #label1, #label2 input, #label2 textarea, p").hide(4000);
});
$("button#not").click(function () {
    $("form > input, form > textarea, #label1, #label2 input, #label2 textarea, p").hide();
});