WordPress Theme Customizer: How to hide child options when parent option isn't selected.

Dobri

2013-08-26 13:24:50 UTC

Perhaps a JavaScript/jQuery solution?

I'm not sure how classes work for customizer so I'll just give them classes "top-level" and "bottom-level". You can figure out the selector difference I hope

(function($) {

$(document).ready(function(){
$('.top-level > .bottom-level').hide();
$('.top-level > input[type=radio]:checked').parent().children('.bottom-level').show();
});

$('.top-level > input[type=radio]').change(function(){
if($(this).attr('checked'))
{
$(this).parent().children('.bottom-level').show();
}
else
{
$(this).parent().children('.bottom-level').hide();
}
});

})(jQuery);

Note: this is untested code but I think it should work. Let me know if you have any trouble and I'll try it out in jsbin or something.

~Dobri

Post by Sujay Pawar
Hello hackers, could you possibly help me with this?
Quickly -
I'm trying to figure out "How to hide child options when parent option
isn't selected. (in WordPress customizer)
______________
More Details -
There are few bullet points (Parent Options); each might have several child
options under it.
Right now what happens is all parents and child options are visible by
default when I create a new custom control.
Ex -
# Bullet 1
1
2
3
# Bullet 2 (selected)
I
II
III
# Bullet 3
i
ii
iii
______________
And what I want to do is similar to what happens in default "Static Front
Page" customizer setting - The child options should be visible ONLY of the
selected parent option.
Ex -
# Bullet 1
# Bullet 2 (selected)
I
II
III
# Bullet 3
______________
Video -
http://youtu.be/lT_yw2b4KCM
(Video is taken from www.yourdomain.com/wp-admin/customize.php - In
WordPress Dashboard, Under Appearance -> Themes -> Customize)
Any help would be greatly appreciated.
--
____________________
*
Sujay Pawar*
Mobile : +91 90283 90000
Office : +91 20353 23000
USA Toll Free : +1 85553 - SHARK (74275)
Skype : SUJAYPAWAR
_______________________________________________
wp-hackers mailing list
http://lists.automattic.com/mailman/listinfo/wp-hackers