jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

Question

I have a fiddle here: http://jsfiddle.net/qbr3oty6/

The headers are schools. If you click on the header the .content div reveals a list of dates. If you select a date, the .content div remains open so that you know you selected it, while you browse through others (you may select up to three).

My predicament is, if you select two dates from the same school (for instance, two from Archbishop John Carroll), then I click Archbishop Wood and select a date from there, then uncheck one of the dates from Archbishop John Carroll WITHOUT clicking on the header first -- the div closes. It would be fine if nothing was checked off, but since I checked off two events, unchecking one should not make the div collapse. How can I alter my JS to make this work?

headers are only '.active' if you've clicked to reveal it's content -- it stays open if you've checked a box by adding the '.selected' class to the .head and .content. I realize that's a bit confusing...

Any help is appreciated.

HTML:

<div class="school-list">
<div>
    <h4 class="head">Archbishop John Carroll</h4>
    <div class="content">
        <input id="ajc_1019" type="checkbox" value="ajc_1019"><label for="ajc_1019">Sun. Oct. 19 11:00am</label>
        <input id="ajc_1021" type="checkbox" value="ajc_1021"><label for="ajc_1021">Tues. Oct. 21 6:00pm</label>
        <input id="ajc_0222" type="checkbox" value="ajc_0222"><label for="ajc_0222">Sun. Feb. 22 11:00am</label>
        <a href="">learn more about this school</a>
    </div>
</div>

<div>
    <h4 class="head">Archbishop Ryan</h4>
    <div class="content">
        <input id="ar_1016" type="checkbox" value="ar_1016"><label for="ar_1016">Thu. Oct. 16 6:30pm</label>
        <a href="">learn more about this school</a>
    </div>
</div>

<div>
    <h4 class="head">Archbishop Wood</h4>
    <div class="content">
        <input id="aw_1113" type="checkbox" value="aw_1113"><label for="aw_1113">Thu. Nov. 13 7:00pm</label>
        <input id="aw_0416" type="checkbox" value="aw_0416"><label for="aw_0416">Thu. Apr. 16 7:00pm</label>
        <a href="">learn more about this school</a>
    </div>
</div>

<div>
    <h4 class="head">Bishop McDevitt</h4>
    <div class="content">
        <input id="bm_1005" type="checkbox" value="bm_1005"><label for="bm_1005">Sun. Oct. 5 12:00pm</label>
        <input id="bm_0422" type="checkbox" value="bm_0422"><label for="bm_0422">Wed. Apr. 22 6:30pm</label>
        <a href="">learn more about this school</a>
    </div>
</div>

CSS:

.school-list {
margin-top: 40px;
}
.school-list > div {
margin: 5px;
}
.school-list .head {
display:block;
background-color: #a8a8a8;
border: solid 1px #a8a8a8;
color: #fff;
padding: 10px 0;
text-align: center;
}
.school-list .active {
background-color: #000;
border: solid 1px #000;
}
.school-list .selected {
display: block!important;
}
.school-list h3.selected {
background-color: #000;
border: solid 1px #000;
}
.school-list .content {
background-color: #f8f8f8;
border: solid 1px #a8a8a8;
border-top: 0px;
display:none;
padding: 5px 0;
text-align: center;
}
.school-list .content a {
color: #0072bc;
display: block;
font-size: 0.75em;
text-decoration: underline;
}

JS:

$(document).ready(function(){
           $('.head').click(function(e){
            e.preventDefault();
            $('.content').hide();
            $('.content').prev().removeClass('active');
            $(this).closest('div').find('.content').slideToggle();
            $(this).toggleClass('active');
        });
    $('input[type=checkbox]').change(function(){
        if (this.checked) {
             $(this).parent().addClass('selected');
                $(this).parent().prev().addClass('selected');
         } else {
                 $(this).parent().removeClass('selected');
                 //$(this).parent().prev().removeClass('selected');
         }
    });
});

I just quickly read through the code so I might be wrong but maybe don't call the slideToggle if there is already an active element in that content area? — Gary Storey
headers are only active if you've clicked to reveal it's content -- it stays open if you've checked a box by adding the 'selected' class to the .head and .content. I realize that's a bit confusing... — Kat
i think I get it. In your input change function you should check the sibling inputs to make sure none of them are selected before removing the selected class. — Gary Storey
partially why I'm here...I can usually muddle thru and figure out the JS but I can't seem to in this case. your suggestion makes sense, I just haven't been able to translate the logic over. — Kat

matthias_h matthias_h · Accepted Answer · 2014-09-12T19:50:43

I've just updated your Fiddle: Fiddle

I've just changed the line where you remove the selected class for the parent header as follows - previously you removed the class in case the changed checkbox wasn't checked:

$('input[type=checkbox]').change(function(){
  if (this.checked) {
       $(this).parent().addClass('selected');
       $(this).parent().prev().addClass('selected');
  }
  else
  {  //changed this below to count checked inputs
     $(this).parent().removeClass('selected');
  }
 });

In case there are more checkboxes, just count all checked checkboxes and only remove the select class in case there are no checkboxes checked:

    $('input[type=checkbox]').change(function(){
     if (this.checked) {
             $(this).parent().addClass('selected');
             $(this).parent().prev().addClass('selected');
     }
     else if($(this).parent().find("input:checked" ).length == 0)  {
         $(this).parent().removeClass('selected');
     }
    });

jQuery: accordion-LIKE format. how to prevent div from collapsing if one of the checkboxes is checked

1 Answers