JSFiddle - React, Tailwind, and code Playground

by Peter Nosko

HTML

<form>
    <div class="container">
        <div>
            <input type="checkbox" class="S0" id="S0" name="S0" value="1" checked="">
            <label for="S0">Show in Results</label>
            <br>
            <input type="text" id="C0" name="C0" value="Search Criteria" size="24" maxlength="255" readonly>
        </div>
        <hr>
        <div class="header">
            <img src="//noskoware.com/srch_collapse.png" alt="expand">                
            <span>General Institution Information</span>
        </div>
        <div class="content">
            <dl>
                <dd>IPF&nbsp
                    <input type="text" id="C1" name="C1" value="" size="20" maxlength="255">
                </dd>
                <dd>
                    <input type="checkbox" id="S2" name="S2" value="1" checked="">
                    <label for="S2">Institution Name</label>
                    <br>
                    <input type="text" id="C2" name="C2" value="" size="24" maxlength="255">
                </dd>
                <dd>
                    <input type="checkbox" id="S3" name="S3" value="1">
                    <label for="S3">Address</label>
                    <br>
                    <input type="text" id="C3" name="C3" value="" size="24" maxlength="255">
                </dd>
                <dd>
                    <input type="checkbox" id="S4" name="S4" value="1">
                    <label for="S4">City</label>
                    <br>
                    <input type="text" id="C4" name="C4" value="" size="24" maxlength="255">
                </dd>
                <dd>
                    <input type="checkbox" id="S5" name="S5" value="1">
                    <label for="S5">State</label>
                    <br>
                    <input type="text" id="C5" name="C5" value="" size="24" maxlength="255">
                </dd>
                <dd>
                    <input type="checkbox" id="S6" name="S6" value="1">
                    <label...

CSS

.container {
    width:200px;
    border:1px solid #d3d3d3;
    background-color: aliceblue;
    FONT-FAMILY: Arial, Helvetica, sans-serif;
    FONT-SIZE: 12px;
}
.container .header {
    padding: 2px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    padding : 5px;
    margin-top: -15px;
    margin-left: -32px;
}
.collapsed {
    display: none;
}

JavaScript

$(".header").click(function () {
    $header = $(this);
    //getting the next element
    $content = $header.next();
    $image = $header.find("img");
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(10, function () {
        //execute this after slideToggle is done
        //change header image
        $image.attr('src', $content.is(":visible") ? "//noskoware.com/srch_collapse.png" : "//noskoware.com/srch_expand.png");
    });
});
$(".S0").click(function () {
    $(".S0").prop("checked", "checked");
});