Multiple Checkboxes Hide Div

by TheFiddler

HTML

<div id="wrapper">
    <div id="div1Accordion">DIV 1 Content</div>
    <div class="accordionContent">Content 1
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />Long Example</div>
    <div id="div2Accordion">DIV 2 Content</div>
    <div class="accordionContent">Content 2
        <br />
        <br />
        <br />
        <br />
        <br />Medium Example</div>
    <div id="div3Accordion">DIV 3 Content</div>
    <div class="accordionContent">Content 1
        <br />Short Example</div>
    <div id="div4Accordion">DIV 4 Content</div>
    <div class="accordionContent">Content 4
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />Extra Long Example</div>
</div>
<hr>
<div id="checkboxes">
    <label>Div 1 A</label>
    <input type="checkbox" value="div1" />
    <br>
    <label>Div 1 B</label>
    <input type="checkbox" value="div1" checked="true" />
    <br>
    <label>Div 2</label>
    <input type="checkbox" value="div2" />
    <br>
    <label>Div 3 A</label>
    <input type="checkbox" value="div3" />
    <br>
    <label>Div 3 B</label>
    <input type="checkbox" value="div3" />
    <br>
</div>
<hr>
<div class="div1" style="opacity:0.5;">div 1 with some text</div>
<div class="div1" style="opacity:0.5;">div 1
    <br>
    <input type="checkbox" />
    <br>
    <input type="checkbox" />
    <br>
    <input type="checkbox" />
    <br>
</div>
<div class="div2" style="opacity:0.5;">A div 2</div>
<div class="div3" style="opacity:0.5;">div 3</div>
<div class="div3" style="opacity:0.5;">div 3 part B</div>

CSS

label {
    width:60px;
    font-weight: bold;
    display: block;
    float: left;
}
label:after {
    content:": "
}
#wrapper {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.accordionButton {
    width: 800px;
    float: left;
    background: #003366;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
}
.accordionContent {
    width: 800px;
    float: left;
    background: #95B1CE;
    display: none;
}

JavaScript

$(function () {

    //ACCORDION BUTTON ACTION	

    $('#wrapper').on('click', '.accordionButton', function (event) {
       
        $('div.accordionContent').slideUp('normal');
        $(this).next().slideDown('normal');

    });

    //HIDE THE DIVS ON PAGE LOAD	
    $("div.accordionContent").hide();

    $('#checkboxes input:checkbox').change(function () {
         $("div.accordionContent").hide();
        var allvalues = new Array();
        $('#checkboxes input').each(function () {
            allvalues.push($(this).attr('value'));
        });

        var selectedvalues = new Array();

        $('#checkboxes input:checked').each(function () {
            selectedvalues.push($(this).attr('value'));
        });
        //console.log(allvalues);
        //console.log(selectedvalues);

        var resultstohide = [];

        resultstohide = $.grep(allvalues, function (value, i) {
            for (var i = 0; i < selectedvalues.length; i++) {
                if (value == selectedvalues[i]) {
                    return false
                }
            }
            return true;
        });

        //console.log("HIDE " + resultstohide);
        $.each(selectedvalues, function (i, el) {
            var $thediv = $('.' + el);
            var $inputs = $('.' + el + ' :input');
            var $accordion = $('#' + el + 'Accordion');
            //add active class to accordion dropdown
            $($accordion).addClass('accordionButton')
            //fade in divs
            $($thediv).fadeTo('fast', 1.0);
            //enable inputs
            $($inputs).prop('disabled', false);
        });

        $.each(resultstohide, function (i, el) {
            var $thediv = $('.' + el);
            var $inputs = $('.' + el + ' :input');
            var $accordion = $('#' + el + 'Accordion');
            //add active class to accordion dropdown
            $($accordion).removeClass('accordionButton')
            //fade out
            $($thediv).fadeTo('fast', 0.5);
  ...