Drop down

by Emily Humphrey

HTML

<div class="drop-down-ctn">
    <div class="drop-down bed-drop-down"> <a href="#" class="dd-q dd-expand">How Many Bedrooms?</a>

        <div class="dd-s"> <a href="#" class="sel-one dd-expand">1 Bedroom</a>
 <a href="#" class="sel-two dd-expand">2 Bedrooms</a>
 <a href="#" class="sel-three dd-expand">3 Bedrooms</a>
 <a href="#" class="sel-four dd-expand">4 or More Bedrooms</a>

        </div>
        <ul>
            <li><a href="#" class="dd-opt-one">1 Bedroom</a>

            </li>
            <li><a href="#" class="dd-opt-two">2 Bedrooms</a>

            </li>
            <li><a href="#" class="dd-opt-three">3 Bedrooms</a>

            </li>
            <li><a href="#" class="dd-opt-four">4 or More Bedrooms</a>

            </li>
        </ul>
        <div class="hidden">
            <input type="radio" class="radio-1" name="bedrooms" value="1">
            <input type="radio" class="radio-2" name="bedrooms" value="2">
            <input type="radio" class="radio-3" name="bedrooms" value="3">
            <input type="radio" class="radio-4" name="bedrooms" value="4 or more">
        </div>
    </div>
</div>
<br>
<div class="drop-down-ctn">
    <div class="drop-down bed-drop-down"> <a href="#" class="dd-q dd-expand">How Many Bedrooms?</a>

        <div class="dd-s"> <a href="#" class="sel-one dd-expand">1 Bedroom</a>
 <a href="#" class="sel-two dd-expand">2 Bedrooms</a>
 <a href="#" class="sel-three dd-expand">3 Bedrooms</a>
 <a href="#" class="sel-four dd-expand">4 or More Bedrooms</a>

        </div>
        <ul>
            <li><a href="#" class="dd-opt-one">1 Bedroom</a>

            </li>
            <li><a href="#" class="dd-opt-two">2 Bedrooms</a>

            </li>
            <li><a href="#" class="dd-opt-three">3 Bedrooms</a>

            </li>
            <li><a href="#" class="dd-opt-four">4 or More Bedrooms</a>

            </li>
        </ul>
        <div class="hidden">
            <input type="radio" class="radio-1" name="bathrooms" value="1">
 ...

CSS

body {
    background:#E6E2DB;
    color:#494947;
    font-family:"Myriad Pro", Frutiger, "Frutiger Linotype", Helvetica, Arial, sans-serif;
    font-size:16px;
    overflow-y: auto;
    padding:40px;
    margin:0;
}
div.drop-down-ctn {
    display:block;
    height:36px;
    overflow:visible;
    margin:0 0 20px;
}
div.drop-down {
    display:block;
    position:relative;
    z-index:2;
    font-size:1em;
    background: rgba(255, 255, 255, 1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: solid 1px #ccc;
    width:310px;
    overflow:hidden;
    cursor: pointer;
}
div.drop-down.expand {
    z-index:9;
}
.dd-q, div.drop-down ul li a {
    display:block;
    font-size:1em;
    padding:10px 8px 7px 10px;
}
.dd-q, .dd-s a {
    color:#919190;
    font-size:1em;
    padding:10px 8px 7px 10px;
    text-decoration:none;
}
.dd-s a {
    display:none;
}
.opt-1 .sel-one, .opt-2 .sel-two, .opt-3 .sel-three, .opt-4 .sel-four {
    display:block !important;
}
.opt-1 .dd-q, .opt-2 .dd-q, .opt-3 .dd-q, .opt-4 .dd-q {
    display:none;
}
div.drop-down ul li a {
    border-bottom:1px #ccc solid;
    text-decoration:none;
}
div.drop-down ul li a:hover {
    background:#eee;
}
.opt-1 .dd-opt-one, .opt-2 .dd-opt-two, .opt-3 .dd-opt-three, .opt-4 .dd-opt-four {
    background:#C8E3BA !important;
}
div.drop-down ul li:first-of-type a {
    border-top:1px #ccc solid;
}
div.drop-down ul li:last-of-type a {
    border-bottom:none;
}
div.drop-down ul {
    display:none;
}
div.drop-down.expand ul {
    display:block;
}
div.drop-down ul, div.drop-down li {
    padding:0;
    list-style:none;
    margin:0;
}
div.hidden {
    display:none;
}

JavaScript

$(".drop-down-ctn").each(function () {




    var optOne = false,
        optTwo = false,
        optThree = false,
        optFour = false,
        ddExpand = false,
        ddBox = $(this).children(".drop-down"),
        ddBoxLink = $(this).find("a.dd-expand"),
        LinkOne = $(this).find("a.dd-opt-one"),
        LinkTwo = $(this).find("a.dd-opt-two"),
        LinkThree = $(this).find("a.dd-opt-three"),
        LinkFour = $(this).find("a.dd-opt-four");

    $(ddBoxLink).click(function (event) {
        event.preventDefault();
        if (ddExpand === false) {
            $(ddBox).addClass('expand'),
            ddExpand = true;
        } else {
            $(ddBox).removeClass('expand'),
            ddExpand = false;
        }
    });

    $(LinkOne).click(function (event) {
        event.preventDefault();
        if (optOne === false) {
            $(ddBox).addClass('opt-1'),
            $(ddBox).removeClass('expand'),
            $(ddBox).removeClass('opt-2'),
            $(ddBox).removeClass('opt-3'),
            $(ddBox).removeClass('opt-4'),
            optOne = true,
            optTwo = false,
            optThree = false,
            optFour = false,
            ddExpand = false,
            $(ddBox).find(".radio-1").prop("checked", true);
        } else {}
    });
    $(LinkTwo).click(function (event) {
        event.preventDefault();
        if (optTwo === false) {
            $(ddBox).addClass('opt-2'),
            $(ddBox).removeClass('opt-1'),
            $(ddBox).removeClass('opt-3'),
            $(ddBox).removeClass('opt-4'),
            $(ddBox).removeClass('expand'),
            optOne = false,
            optTwo = true,
            optThree = false,
            optFour = false,
            ddExpand = false,
            $(ddBox).find(".radio-2").prop("checked", true);
        } else {}
    });
    $(LinkThree).click(function (event) {
        event.preventDefault();
        if (optThree === false) {
            $(ddBox).addClass('opt-3'),
 ...