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