SO - 16336172

by Arun P Johny

HTML

<div id="filterControls">
    <label><input type="checkbox" value="mood" name="MoodCheckbox" /> Mood</label>
    <label><input type="checkbox" value="medical" name="MedicalCheckbox" /> Medical</label>
</div>

<div class="sectionContent mood">
    Mood div
</div>

<div class="sectionContent medical">
    Medical div
</div>

<div class="sectionContent voice">
    Voice div
</div>

CSS

.sectionContent {
    background: #ddd;
    mragin: 10px;
}

JavaScript

var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.hide();
        checked.each(function(){
            $("." + $(this).val()).show();
        });
    } else {
        sections.show();
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();