JSFiddle - React, Tailwind, and code Playground

by Peter Nosko

HTML

<form>
    <div class="SrchPanel">
        <div class="SrchHeader">
            <img src="//noskoware.com/srch_collapse.png" alt="expand">
            <span>Institution Search</span>
        </div>
        <div class="SrchMain SrchCollapsible">
            <div class="SrchLink">
                <a href="#">Power Search</a>
            </div>
            <div class="SrchHidden">
                <hr class="SrchBoldLine SrchHidden"/>
                <span>Saved Searches:<br>
                    <select iD="OpenSearchID" NAME="OpenSearchID" style="max-width:98%;">
                        <option selected value="0"></option>
                        <option  value="35">test 1</option>
                        <option  value="36">test 2</option>
                        <option  value="37">test 3</option>
                        <option  value="38">test 4 long name that can't be contained within the search panel</option>
                    </select>
                    <br>
                    <input name="Open" type="button" value="Open">
                    <input name="Reset" type="button" value="Reset" onclick="ReloadEmptyForm();">
                    <hr class="SrchLine">
                    <input type="text" id="C1" name="C1" value="" size="29" maxlength="255">
                    <br>
                    <input name="Save" type="button" value="Save">
                    <input name="Delete" type="button" value="Delete" disabled="">
                    <input name="Search" type="submit" value="Search">
                </span>
            </div>
            <hr class="SrchBoldLine"/>
            <div id="1" class="SrchHeader">
                <img id="2" src="//noskoware.com/srch_collapse.png" alt="expand">
                <span id="3">General Institution Information</span>
            </div>
            <hr>
            <div class="SrchOptions SrchCollapsible">
                <dl>
                    <dd>IPF&nbsp
                        <input type="text" id="C1"...

CSS

.SrchPanel {
    width:225px;
    border:1px solid #d3d3d3;
    background-color: #e6eef4;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.SrchPanel .SrchHeader {
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
}
.SrchPanel .SrchOptions {
    padding: 5px;
    margin-top: -15px;
    margin-left: -32px;
}
.SrchMain {
    padding: 5px;
}
.SrchLink {
    margin-top: -25px;
    margin-left: 132px;
}
.SrchLine {
    margin-top: 8px;
    margin-bottom: 8px;
    height:1px;
    border:none;
    background-color:#051d55;
}
.SrchBoldLine {
    margin-top: 8px;
    margin-bottom: 8px;
    height:2px;
    border:none;
    background-color:#051d55;
}
.SrchHiddenx {
    display: none;
}
INPUT[type=Submit], INPUT[type=Button]  {
  FONT-FAMILY: Arial,Helvetica,sans-serif;
  COLOR: #ffffff;
  FONT-SIZE: 12px;
  background-color:#021746;
  padding:5px 10px;
  -webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	border:none;
}

JavaScript

$(".SrchHeader").click(function () {
    $header = $(this);
    //get the related content div
    $content = $header.nextAll(".SrchCollapsible").first();
    //alert($content.length);
    //get the header image
    $image = $header.find("img");
    //alert($image.attr("myDesc"));
    //toggle the slide; if visible, slide up, if not slidedown.
    $content.slideToggle(10, function () {
        //toggle the header image
        $image.attr('src', $content.is(":visible") ? "//noskoware.com/srch_collapse.png" : "//noskoware.com/srch_expand.png");
    });
});
$(".StoredSearch").click(function () {
    if (confirm('Are you sure?')) {
    $content = $("div.storedSearch");
    if ($content.length == 0) {
        alert('DIV Not Found!');
    }
    //toggle the slide; if visible, slide up, if not slidedown.
    $content.slideToggle(10);
    }
});
function SrchModeSwitch() {

};