JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="drop-down-ctn">
    <div class="drop-down">
        <button class="expander"><span>How Many Bedrooms?</span></button>
        <ul class="options">
            <li><button class="one">1 Bedroom</button></li>
            <li><button class="two">2 Bedroom</button></li>
            <li><button class="three">3 Bedroom</button></li>
            <li><button class="four">4 Bedroom</button></li>
        </ul>
        <span styles="display:none;"><input type="radio" name="bedrooms" value="One Bedroom" class="opt-1"><input type="radio" name="bedrooms" value="Two Bedrooms" class="opt-2"><input type="radio" name="bedrooms" value="Three Bedrooms" class="opt-3"><input type="radio" name="bedrooms" value="Four Bedrooms" class="opt-4"></span>
    </div>
</div>








<div class="drop-down">
    <button class="expander">How Many Bedrooms?</button>
    <ul class="options">
        <li><button class="one">1 Bedroom</button></li>
        <li><button class="two">2 Bedroom</button></li>
        <li><button class="three">3 Bedroom</button></li>
        <li><button class="four">4 Bedroom</button></li>
    </ul>
    <span styles="display:none;"><input type="radio" name="bathrooms" value="One Bedroom" class="opt-1"><input type="radio" name="bathrooms" value="Two Bedrooms" class="opt-2"><input type="radio" name="bathrooms" value="Three Bedrooms" class="opt-3"><input type="radio" name="bathrooms" value="Four Bedrooms" class="opt-4"></span>
</div>

CSS

body{background:#E6E2DB;color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;font-size:16px;overflow-y:auto;padding:0;margin:20px;}div#wrapper{display:block;width:940px;margin:20px auto 0;}div.boxes{display:block;margin-bottom:20px;position:relative;background:#fbfbfb;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;float:left;}div.boxes:after{display:block;height:100%;width:100%;position:absolute;bottom:-4px;right:-4px;background:#323232;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;content:"";opacity:.05;z-index:-1;}div.boxes-4{width:220px;margin-right:20px;}div.boxes-3{width:300px;margin-right:20px;}div.boxes-2{width:460px;margin-right:20px;}div.boxes-1{width:940px;margin-right:0;}*{color:#494947;font-family:"Myriad Pro",Frutiger,"Frutiger Linotype",Helvetica,Arial,sans-serif;}p{line-height:1.25em;}.larger{font-size:1.5em;}.large{font-size:1.25em;}.small{font-size:0.75em;}.smaller{font-size:0.5em;}.green{color:#79BE50;}.purple{color:#7D569F;}.bold{font-weight:700;}div.boxes-4 .contain{width:180px;padding:20px;}div.boxes-3 .contain{width:260px;padding:20px;}div.boxes-2 .contain{width:420px;padding:20px;}div.boxes-1 .contain{width:900px;padding:20px; overflow:hidden;}


ul, li{
    padding:0;
    margin:0;
    list-style:none;
}
button{
    background:none;
    border:none;
}
.drop-down-ctn{
    display:block;
    height:41px;
    overflow:visible;
    position:relative;
}
.drop-down-ctn:nth-of-type(3){z-index:1;}
.drop-down-ctn:nth-of-type(2){z-index:2;}
.drop-down-ctn:nth-of-type(1){z-index:3;}
.drop-down{
    display:block;
    width:320px;
    height:41px;
    margin:20px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size:1em;
    color:#333;
    background:#fbfbfb;
    border:#7D569F solid 1px;
    text-align:left;
    overflow:hidden;
    transition: height .2s ease;
    -webkit-transition: height .2s...

JavaScript

$('.drop-down').each(function () {
    
    var dd = $(this),
        ex = $(this).find('.expander'),
        linkOne = $(this).find('button.one'),
        linkTwo = $(this).find('button.two'),
        linkThree = $(this).find('button.three'),
        linkFour = $(this).find('button.four'),
        btnOne = $(this).find("input.opt-1"),
        btnTwo = $(this).find("input.opt-2"),
        btnThree = $(this).find("input.opt-3"),
        btnFour = $(this).find("input.opt-4"),
        valOne = $(this).find("input.opt-1").val(),
        valTwo = $(this).find("input.opt-2").val(),
        valThree = $(this).find("input.opt-3").val(),
        valFour = $(this).find("input.opt-4").val(),
        optTitle = $(this).find("button.expander span"),
        optOne = false,
        optTwo = false,
        optThree = false,
        optFour = false;

    $(ex).click(function() {
        $(dd).toggleClass('expand');
        return false;
    });
    
    $(linkOne).click(function() {
        if(optOne === false){
            optOne = true,
            optTwo = false,
            optThree = false,
            optFour = false,
            $(this).addClass('active'),
            $(linkTwo).removeClass('active'),
            $(linkThree).removeClass('active'),
            $(linkFour).removeClass('active'),
            $(dd).removeClass('expand'),
            $(btnOne).prop('checked',true),
            $(optTitle).html(valOne);
        } else{
            $(dd).removeClass('expand');
        }
        return false;
    });
    
    $(linkTwo).click(function() {
        if(optTwo === false){
            optOne = false,
            optTwo = true,
            optThree = false,
            optFour = false,
            $(this).addClass('active'),
            $(linkOne).removeClass('active'),
            $(linkThree).removeClass('active'),
            $(linkFour).removeClass('active'),
            $(dd).removeClass('expand'),
            $(btnTwo).prop('checked',true),
           ...