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

_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)_ - this doesn't seem to work in your fiddle, can you verify this? When I open a single accordion "Close all accordions" is still checked — zgood, Dec 07 '16 at 19:50
@zgood i have updated the fiddle: https://jsfiddle.net/q5haz642/7/ When opening/closing up a single accordion, the radio button will be unhighlighted now — Moxie C, Dec 07 '16 at 20:04

score 0 · Accepted Answer · answered Dec 07 '16 at 20:26

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.

Jquery Prevent Collapsible Set from firing

1 Answers1