This is a pretty straight forward question.
I'm trying to hide a tab based on drop-down selection. I have added the granite:class as image-tab for the tab to be hided.
The below piece of code is working for onchange method when ever i change drop-down, I get to see the Image tab getting hided. But the same is not retained during dialog-ready.
I get value of 'a' as undefined.
Please help me to resolve.
Please find the below clientlibs for the same.
(function(document, $, ns) {
"use strict";
$(document).on("dialog-ready", function(e) {
var imageDD = $(this).find(".cq-dialog-dropdown-showhide :selected").val();
var valueDD = $(this).find(".cq-dialog-dropdown-showhide");
if(imageDD == 'no-image'){
alert('hide the image......');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
alert('a::::'+a);
$('#'+a).hide();
}else{
alert('dont hide the image.....');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).show();
}
valueDD.on('change', function(event) {
var select = $(this).val();
if(select == 'no-image'){
alert('hide the image');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).hide();
}else{
alert('dont hide the image');
var a = $('.image-tab').parent().parent("coral-panel[role='tabpanel']").attr('aria-labelledby');
$('#'+a).show();
}
})
});
})(document,Granite.$, Granite.author);