Drop down

by Emily Humphrey

HTML

<div class="drop-down-ctn">
    <div class="drop-down bed-drop-down">
        <span class="dd-q">How Many Bedrooms?</span>
        <div class="dd-s"> 
            <span class="sel-one">1 Bedroom</span>
            <span class="sel-two">2 Bedrooms</span>
            <span class="sel-three">3 Bedrooms</span>
            <span class="sel-four">4 or More Bedrooms</span>
        </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>
                
                
                
                
                
                
                
                
                
                
<div class="drop-down-ctn">
    <div class="drop-down bath-drop-down">
        <span class="dd-q">How Many Bathrooms?</span>
        <div class="dd-s"> 
            <span class="sel-one">1 Bathroom</span>
            <span class="sel-two">2 Bathrooms</span>
            <span class="sel-three">3 Bathrooms</span>
            <span class="sel-four">4 or More Bathrooms</span>
        </div>
        <ul>
            <li><a href="#" class="dd-opt-one">1 Bathroom</a></li>
            <li><a href="#" class="dd-opt-two">2 Bathrooms</a></li>
            <li><a href="#" class="dd-opt-three">3 Bathrooms</a></li>
            <li><a href="#" class="dd-opt-four">4 or More Bathrooms</a></li>
        </ul>
        <div class="hidden">
            <input type="radio"...

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;
}
div.drop-down:hover {
    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 span {
    color:#919190;
    font-size:1em;
    padding:10px 8px 7px 10px;
}
.dd-s span {
    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;
}
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:hover 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,
        ddBox = $(this).children(".drop-down"),
        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");
    
    $(LinkOne).click(function (event) {
		event.preventDefault();
		if (optOne === false) {
			$(ddBox).addClass('opt-1'),
            $(ddBox).removeClass('opt-2'),
            $(ddBox).removeClass('opt-3'),
            $(ddBox).removeClass('opt-4'),
			optOne = true,
            optTwo = false,
            optThree = false,
            optFour = false,
            $(".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'),
            optOne = false,
            optTwo = true,
            optThree = false,
            optFour = false,
            $(".radio-2").prop("checked", true)
        } else {
        }
    });
    $(LinkThree).click(function (event) {
        event.preventDefault();
        if (optThree === false) {
            $(ddBox).addClass('opt-3'),
            $(ddBox).removeClass('opt-1'),
            $(ddBox).removeClass('opt-2'),
            $(ddBox).removeClass('opt-4'),
            optOne = false,
            optTwo = false,
            optThree = true,
            optFour = false,
            $(".radio-3").prop("checked", true)
        } else {
        }
    });
    $(LinkFour).click(function (event) {
        event.preventDefault();
        if (optFour === false) {
            $(ddBox).addClass('opt-4'),
            $(ddBox).removeClass('opt-1'),
            $(ddBox).removeClass('opt-2'),
  ...