jqueryjquery-mobilejquery-mobile-collapsible

Jquery Prevent Collapsible Set from firing


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


Solution

  • 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.