[wp-hackers] WordPress Theme Customizer: How to hide child options when parent option isn't selected.

[Dobri]

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

On Mon, 26 Aug 2013, at 8:44 AM, Sujay Pawar wrote:

> 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://www.youtube.com/watch?v=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
> wp-hackers at lists.automattic.com
> http://lists.automattic.com/mailman/listinfo/wp-hackers