Jquery Prevent Collapsible Set from firing

Question

I have a radio button and a few collapsible sets on my page and here is what I want to do:

1) When expanding/collapsing up a single accordion, I want the value of the radio button to be unselected (this seems to be working fine)

2) When changing the value of the radio buttons, I want it to either expand all or close all of my accordions and have the appropriate value of the radio button highlighted. However, when I change the value of the radio button Open All Accordions or Close All Accordions, using this code

$('input[name="expand-collapse"]').change(function(e){

    var val = this.value;

    if (val=='open'){

        $('.ui-collapsible-set').children().collapsible('expand');

    } else if (val=='close'){

        $('.ui-collapsible-set').children().collapsible('collapse');

    }

});

the code:

$(".menu").on("collapsibleexpand", function( event, ui ) 

is firing which is unhighlighting my radio button. How can I prevent the collapsible set on change code from firing?

Here is my jsfiddle code:

https://jsfiddle.net/q5haz642/7/

I have tried e.stopPropagation() on the radio button on change event, but that didn't work.

Any help would be great.

Thanks

Answer 1

For your problem I created a javascript variable called toggleAll which is a bool that will only be set to true when a checkbox is clicked... then is set back to false.

I moved you "uncheck checkbox" logic into its own function for easier management, then would check that bool value to determine if you should uncheck the checkboxes or not.

JS:

var toggleAll = false;
$('input[name="expand-collapse"]').change(function(e) {
  var val = this.value;
  toggleAll = true;

  if (val == 'open') {
    $('.ui-collapsible-set').children().collapsible('expand');
  } else if (val == 'close') {
    $('.ui-collapsible-set').children().collapsible('collapse');
  }

  toggleAll = false;
});

$(".menu").on("collapsibleexpand", function(event, ui) {
  uncheck();
}).on("collapsiblecollapse", function(event, ui) {
  uncheck();
});

function uncheck() {
  if (!toggleAll) {
    var $input = $('input[name="expand-collapse"]');
    $input.prop('checked', false);
    $input.checkboxradio('refresh');
  }
}

Here is a working fiddle.