Hide Form Fields

Hide Form Fields with CSS and jQuery

by Akram kamal

HTML

<form>
<div id="main" class="group1">
     <div>
        <label>Choose group</label>
        <select name="group">
            <option value="group1">Group 1</option>
            <option value="group2">Group 2</option>
            <option value="group3">Group 3</option>
        </select>
    </div>
    <div class="group1_opts">
        <label>G1 option </label><input type="text" name="opt1">
    </div>
    <div class="group1_opts group2_opts">
        <label>G1/G2 option</label><input type="text" name="opt2">
    </div>
    <div class="group2_opts group3_opts">
        <label>G2/G3 option</label><input type="text" name="opt3">
    </div>
    <div class="group3_opts">
        <label>G3 option</label><input type="text" name="opt4">
    </div>
</div>
</form>

CSS

form {
    font-family: helvetica, arial, sans-serif;
    font-size: 11px;
}

form div{
    margin-bottom:10px;
}

form a:hover{
    color:#ffffff;
    background:#111111;   
}

label {
    margin-left:20px;
    margin-right:5px;
    font-size:12px;
    background:#f7f7f7;
    padding: 4px 10px;
    float: left;
    clear: right;
    width: 100px;
    border:1px solid #cccccc;
    vertical-align: middle;
}

input[type="text"]{
    height:22px;
    padding-left:10px;
    padding-right:10px; 
    border:1px solid #cccccc;
    vertical-align: middle;
}


.group1_opts, .group2_opts, .group3_opts {
    display: none;
}

.group1 .group1_opts, .group2 .group2_opts, .group3 .group3_opts{
    display: block;
}

JavaScript

function changeGroup(e) {
    /*
        1 - Remove all group classes
        2 - Add the currently selected group class
    */
    $("#main")
        .removeClass(allGroups)
        .addClass($("option:selected", e.target).val())
}

/* 
    1 - Bind changeGroup function to "change" event
    2 - Fetch all group from the select field 
*/
var allGroups = $("select")
    .change(changeGroup)
    .find("option")
        .map(function() {
            return $(this).val();
        })
        .get()
        .join(' ');