Conditionally hide theme options

[srumery]

Hello Jason,

On the framework theme options Content tab you conditionally hide/show the “Select Custom Layout” dropdown depending on if the Homepage Content selection is “Posts” or “Custom Layout”. How are you doing that? I have a similar need in another area. Are you doing that with custom javascript or is there a function I can call to access this behavior?

I see there is a function called themeblvd_edit_option() that may do the trick. I noticed that in this thread: http://support.themeblvd.com/forums/topic/hide-theme-options-tab/

Topic

[Jason Bobich]

Hello,

Are you wanting to do this with options you’re creating or other options already present by the theme? What specifically are you trying to do?

[srumery]

I have a theme option tab called “Styles” and a new section of options that stores the menu style as well as three fields to store color values. Here are two fields from the section:

array(
		'name'      => 'Main Menu Style',
		'desc'      => 'Select a style for the main menu bar.',
		'id'        => 'main_menu_style',
		'std'       => 'menu_style_1',
		'type'      => 'select',
		'options'   => array(
			'menu_style_1'	=> 'Standard',
			'menu_style_2'	=> 'Modern'
		)
	),
	array(
		'name'      => 'Background Color',
		'desc'      => 'Select a background color for the menu items',
		'id'        => 'main_menu_background_color',
		'std'       => '',
		'type'      => 'color'
	)

Using just these two fields in this example, I would like to hide the field with the ‘id’ => ‘main_menu_background_color’ if the option from ‘id’ => ‘main_menu_style’ is set to ‘menu_style_1’. This is similar to what you are doing with the Homepage Content radio button selection for “Posts” or “Custom Layout”.

[Jason Bobich]

All right, this is built-in, but it’s not easy to understand. I’ll do my best to explain.

All of this is done with javsascript, but there are some CSS classes setup that you can use for this. The concept is that you’ll have your “trigger” option and then your “receiver” options. And then all of these options need to be wrapped into a group with class “show-hide-toggle” —

1) So, first you need to wrap your set of options in a group. You do that like this:

array(
	'type' => 'subgroup_start',
	'class' => 'show-hide-toggle'
),
array(
	// option 1 ...
),
array(
	// option 2 ...
),
array(
	'type' => 'subgroup_end'
)

2) Then, your first “main_menu_style” option is the trigger. To this option, you want to add the class “trigger”:

array(
	'name'      => 'Main Menu Style',
	'desc'      => 'Select a style for the main menu bar.',
	'id'        => 'main_menu_style',
	'std'       => 'menu_style_1',
	'type'      => 'select',
	'options'   => array(
		'menu_style_1'	=> 'Standard',
		'menu_style_2'	=> 'Modern'
	),
	'class'		=> 'trigger'
)

3) Then, your second option needs a few CSS classes.

1. “hide” — So it will be hidden with CSS unless shown with javascript.
2. “receiver” — Because it’s a receiver of the trigger option
3. “receiver-{name_of_selection}” — In this class put the name of the option selection from your trigger option that causes this to show.

So, in this case, you’d have:

array(
	'name'      => 'Background Color',
	'desc'      => 'Select a background color for the menu items',
	'id'        => 'main_menu_background_color',
	'std'       => '',
	'type'      => 'color',
	'class'		=> 'hide receiver receiver-menu_style_1'
)

Note: “menu_style_1” corresponds to the array key of the option you’re targeting the way you set it up. And so that’s why the last class here is “receiver-menu_style_1”

[srumery]

I’m picking up what you’re laying down but I’m not able to get the receiver option to trigger. The option with the new 'class' => 'hide receiver receiver-menu_style_1' is being hidden no matter what the option setting is in the trigger field.

I have tried wrapping the subgroup_start array to include the trigger option (set it just before) as well as excluding it (adding it after) and the results are the same. The second option doesn’t trigger. Does the array for the subgroup_start go before the trigger option array?

array(
		'type' => 'subgroup_start',
		'class' => 'show-hide-toggle'
	),

Here is the code I am using:

array(
		'type' => 'subgroup_start',
		'class' => 'show-hide-toggle'
	),
	array(
		'name'      => 'Main Menu Style',
		'desc'      => 'Select a style for the main menu bar.',
		'id'        => 'main_menu_style',
		'std'       => 'menu_style_1',
		'type'      => 'select',
		'options'   => array(
			'menu_style_1'	=> 'Standard - No changes applied',
			'menu_style_2'	=> 'Modern - flat and boxy'
		),
		'class'		=> 'trigger'
	),
	array(
		'name'      => 'Menu Border Color',
		'desc'      => 'Select a background color for the menu items',
		'id'        => 'main_menu_border_color',
		'std'       => '',
		'type'      => 'color',
		'class'		=> 'hide receiver receiver-menu_style_1'
	),
	array(
		'type' => 'subgroup_end'
	),

In this example, I am expecting the main_menu_border_color option to show when the menu_style_1 is selected in the main_menu_style option and hide when the menu_style_2 is selected.

What am I doing wrong here?

[Jason Bobich]

Hmm, I use this in a lot of plugins and stuff, but I’ve never tried to explain it to anyone. What you have there should be correct. Maybe I’m missing something. Is this something that is up online where I could log into your admin and see it?

[srumery]

It’s on my local development machine. I’ll push up the code to a sandbox site and in the process, maybe I’ll figure something out.

I was looking for an example in the framework so I could duplicate it but the code for the Homepage Content selection (for “Posts” or “Custom Layout” selection) looks like it is written a different way. I also checked the Footer columns options from the Layout tab and didn’t see a match there either.

[Jason Bobich]

It’s actually in several places. Just take the builder or slider plugin and do a search for “show-hide-toggle” in those directories.

[srumery]

I reviewed the slider plugin and I see the “show-hide-toggle” code in use. It looks just like what I am applying. Since I can’t figure it out, I copied the code to a sandbox site that you can take a look at. How should I send you the login information?

I hope you can find out what is going on. This execution is really slick and I will have a few uses for it.

[Jason Bobich]

Go to My Account > Submit private info here on the support website to send the info.

[Bluenotes]

@srumery Try adding an ID to the subgroup_start array… I tried this and it worked for me.

array(
	'id'        => 'my_group_name',
	'type' 		=> 'subgroup_start',
	'class' 	=> 'show-hide-toggle'
),

[srumery]

Thank you @Bluenotes. You’re on to something. I added an ID to the subgroup and that enabled the show-hide-toggle to work properly but it also broke the page style a bit and now the theme option tabs to the right of Style are blank. Something isn’t getting closed properly.

Here is a screenshot of the theme option sections within my Styles tab. You can see they aren’t breaking properly.
http://screencast.com/t/yUasvT6zsuKl

This screenshot shows the tab(s) to the right of Styles are blank.
http://screencast.com/t/uiXrEjvgm

@Bluenotes, did you have to add anything to the closing array?

array(
			'type' => 'subgroup_end'
		)

The trigger is working but something still isn’t quite right.

[Jason Bobich]

Did you try adding an ID to the subgroup_end, as well? Realistically, the ID is meaningless, but I think there may be something in there when you’re using the options API that throws options out if they don’t have an ID. It’s a sort of check to make sure the options API function is receiving properly setup options — although in this case, it doesn’t quite make sense.

[Bluenotes]

@srumery … You’re right. I didn’t catch that style issue. If you add an unique ID to the subgroup_end it does style correctly now for me.

array(
	'id'        => 'my_group_start',
	'type' 		=> 'subgroup_start',
	'class' 	=> 'show-hide-toggle'
),

... your array options ....

array(
	'id'   => 'my_group_end',
	'type' => 'subgroup_end'
)

[srumery]

Jason and @Bluenotes…Thank you both for working out this issue with me. After adding a unique ID to the subgroup end, it is working great. I also added another subgroup to the same page and both of them are working perfectly. It appears that each subgroup start and end array not only needs an id, it must be unique.

Next, I’m going to attempt to nest a subgroup within another. 😉

Cheers!

[srumery]

UPDATE: Trigger nesting

This was a bit tricky but I got it to work. The field that is nested, doesn’t need to receive for the first option, just the second option. The second option does need the trigger class. All other fields need to receive for all possible options. This is a compounding effort and can get really complex, really quickly. It may not be ideal but it does work within the framework. It may be recommended to write custom JavaScript for more complicated interfaces.

[Author]

Replies