CODEWITHSUNDEEP
javascriptjqueryhtmlcsscheckbox
Kat
Kat

Reputation: 121

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

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?

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');
         }
    });
});

Upvotes: 0

Views: 247

Answers (1)

matthias_h
matthias_h

Reputation: 11416

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');
     }
    });

Upvotes: 2

Related Questions