JSFiddle - React, Tailwind, and code Playground

by Lindsey Suarez

HTML

<div class="search1">
    <div class="widget">
        <h2>Make</h2>
        <div class="facet">
            <ul>
                <li>
                    <input type="checkbox" /><a href="#">GMC</a> 
                </li>
                <li>
                    <input type="checkbox" /><a href="#">Chevrolet</a> 
                </li>
                <li>
                    <input type="checkbox" /><a href="#">Buick</a> 
                </li>
                <li>
                    <input type="checkbox" /><a href="#">Cadillac</a> 
                </li>
            </ul>
            <div class="options"> <a href="#">Select Multiple</a>
            </div>
            <div class="options"> <a href="#">OK</a> | <a href="#">Cancel</a>
            </div>
        </div>
    </div>
</div>

CSS

@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
    font-family:'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
.search1 {
    background: #1C58B8;
    font-family:"Open Sans", sans-serif;
    width: 208px;
}
.widget h2 {
    color: white;
    cursor: pointer;
    margin: 0;
    font-size: 1.1rem;
    padding: .6rem .8rem;
    text-transform: uppercase;
    border-top: 1px solid #2771DF;
    border-bottom: 1px solid #16458C;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAwCAQAAAHWhkK+AAAAB3RJTUUH3gEIESkSti/xRAAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAFgSURBVHjatVQ7UsQwDFVYOh+EQ1BsQUnpgoIDUKRYZjiIS46QYgtKDrCH4QApUwh/5NjyWsTeCZrJriPp2Xp6igGi4SH8XSC5JvsotzCQGSLAHUDpck/4cZvRYk24xMhURFKKQURVi+KRHcVS7NvCXx/TUqflK2yZTTLxgPth8Me8AwxD7Zwcp4uSstDBhQSgGHS9yniQ8+yd+jp7wdMmtzyba6noJKfL2gHl14mTlwalck9SZ6oFjFJdWOVBvP8I6c7Ql9TIwHrucpfMa6L6AQrdpGFiCC19EPvY9f52vmYIc56HaOzeIgdk7ihADBXuFKp2V3BTqOa+kao0RtX0Kau4DWRbc85AYz9oaWR7G0iRLG0glj4XF87G3s/7Vd9NlXRul82Djo1y/b/hC7+EKxkKv0mPjKwRk6MyP/hQzqgRk3n/sjt+BYnJVdBn4/AxULPmH53fggeN+LSncD32C1FdNVu543akAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-origin: content-box;
    background-clip: content-box;
    background-position: right 1px;
}
.widget.expanded h2 {
    background-position: right bottom;
}
.widget .facet {
    display: none;
}
.widget.expanded .facet {
    display: block;
}
.widget .options {
    text-align: right;
    font-size: .6rem;
    margin-right: .8rem;
    padding-bottom: .8rem;
}
.widget .options a {
    color: #fff;
   ...

JavaScript

$(".widget").on("click", ".multiple .options a", function (e) {
    e.preventDefault();

    var $this = $(this);
    switch ($this.index()) {
        case 0:
            alert("Submit");
            break;
        case 1:
            $this.closest(".facet").removeClass("multiple").find("input").prop("checked", false);
            break;
    }
}).on("click", ".options:eq(0) a", function (e) {
    e.preventDefault();

    $(this).closest(".facet").addClass("multiple");
}).on("click", "ul a", function (e) {
    var $this = $(this);

    if ($this.is(".multiple a")) {
        e.preventDefault();

        var $chk = $this.prev();
        $chk.prop("checked", !$chk.prop("checked"));
    } else {
        alert("Submit");
    }
}).on("click", "h2", function(e) {
    $(this).parent().toggleClass("expanded");
});