Styled Nested Selects

by secretgspot

HTML

<fieldset>
    
    <legend>Fieldset</legend>
    
    <div class="parent">
        <label>Question 1</label>
        <select>
            <option value="">Select an option</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    
    <div class="wrapper hidden">
    
        <div>
            <label>Question 1.1</label>
            <select>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
    
        <div class="parent">
            <label>Question 1.2</label>
            <select>
                <option value="">Select an option</option>
                <option value="yes">Yes</option>
                <option value="no">No</option>
            </select>
        </div>
    
        <div class="wrapper hidden">        
    
            <div>
                <label>Question 1.2.1</label>
                <select>
                    <option value="">Select an option</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </div>
    
            <div>
                <label>Question 1.2.2</label>
                <select>
                    <option value="">Select an option</option>
                    <option value="yes">Yes</option>
                    <option value="no">No</option>
                </select>
            </div>
    
        </div>
    
    </div>

    <div class="parent">
        <label>Question 2</label>
        <select>
            <option value="">Select an option</option>
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
    </div>
    
    <div class="wrapper hidden">

        <div>
            <label>Question 2.1</label>
            <select>
                <option value="">Select...

CSS

body {
    font: 1em/1.5 sans-serif;
    padding: 20px;
}
fieldset {
    background: #eef;
    border-radius: 0 0 10px 10px;
    color: #333;
    display: inline-block;
    padding: 0 20px 20px;
}
legend {
    background: #dde;
    border-bottom: 1px solid hsla(0,0%,0%,.25);
    border-radius: 10px 10px 0 0;
    color: hsla(0,0%,0%,.75);
    display: block;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0 -20px;
    padding: 10px 20px;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    text-transform: uppercase;
    width: 100%;
}
div.wrapper {
    padding-left: 20px;
}
div.wrapper div {
    position: relative;
}
div.wrapper div:before {
    background: #eef;
    content: '\231E';
    left: -40px;
    padding-left: 25px;
    position: absolute;
    top: 17px;
}
div.hidden {
    display: none;
}
div.parent:after {
    color: hsla(0,0%,0%,.5);
    content: ' (yes reveals more questions)';
    line-height: 30px;
}
label {
    color: hsla(0,0%,0%,.75);
    display: block;
    font-weight: bold;
    padding-top: 20px;
    text-transform: uppercase;
}
select {
    background-color: #eeeef6;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border: 1px solid #aaa;
    border-radius: 2px;
    color: #333;
    cursor: pointer;
    outline: none;
    padding: 5px;
    position: relative;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.5);
    vertical-align: top;
    -webkit-appearance: none;
}
select:hover {
    box-shadow: 0 1px 2px hsla(0,0%,0%,.25);
}
select:active,
select:focus {
    background-color: #e6e6ee;
    box-shadow: inset 0 1px 2px hsla(0,0%,0%,.25);
}

JavaScript

$('select').change(function() {

    var selectValue = $(this).val(),
        children = $(this).closest('div').next('div.wrapper');
    
    if( selectValue === 'yes' ) {
        children.slideDown();
    }
    else {
        children.slideUp();
    }

})