Conditional Meta Boxes

Question

I am creating multiple meta boxes in WordPress, and I want the user to be able to toggle certain boxes on or off.

So, they click a radio button (in a separate meta box), update the options, and an additional meta box attached to that radio value will appear.

So it basically goes from one meta box (the selector box) to two meta boxes (the selector box, AND the new box they just selected).

In my code, you can create a meta box by setting something like this up (this is the radio box where the user selects for other meta boxes to toggle on/off):

// Create meta box that gives user ability to select additional meta box,
   which will then show upon saving the post

$meta_boxes[] = array(
    'id' => 'meta_box_id',
    'title' => 'Box title',
    'pages' => array('page'),
    'context' => 'side',
    'priority' => 'low',
    'fields' => array(
        array(
            'name' => 'Select:',
            'id' => $prefix . 'meta_box_id',
            'type' => 'radio',
            'options' => array(
                array('name' => 'Value 1', 'value' => 'value_one'),
                array('name' => 'Value 2', 'value' => 'value_two'),
            )
        )
    )
);

Here is what it looks like in WordPress:

https://i.stack.imgur.com/xR69s.png

And here is another meta box that, once selected in the meta box above (let's say value_one is selected), will appear on the post screen:

// This meta box will only show if 'value_one' is selected from 
the radio box above

$meta_boxes[] = array(
    'id' => 'standard_lead',
    'title' => 'Standard Lead',
    'pages' => array('page'),
    'context' => 'normal',
    'priority' => 'high',
    'lead' => 'value_one',
    'fields' => array(
        array(
            'type' => 'text',
            'id' => $prefix . 'standard_title',
            'name' => 'Lead Title',
            'desc' => 'The title of your Standard Lead',
            'width' => '100'
        ),
        array(
            'type' => 'textarea',
            'id' => $prefix . 'standard_content',
            'name' => 'Lead Content',
            'desc' => 'The content of your Standard Lead (you can use HTML)',
            'width' => '100'
        )
    )
);

The important piece from that code is this:

'lead' => 'value_one',

My plan was to have the ['lead'] value (from the meta box code directly above) to match the ['value'] value (from the radio meta box), so they could be connected, and then test with an IF statement to make sure they equal the same thing, and then display ONLY if they both equal value_one.

The function below is what actually adds the meta boxes into WordPress. Within that function, I tried creating this IF statement to match those two together:

if($this->_meta_box['value'] == $this->_meta_box['lead'])

...but it doesn't work, and I'm not sure how to target ['value'] as it's nested within multiple arrays (or I assume, is the problem).

Here's the full function:

function add_meta_boxes()
{
    $this->_meta_box['context'] = empty($this->_meta_box['context']) ? 'normal' : $this->_meta_box['context'];
    $this->_meta_box['priority'] = empty($this->_meta_box['priority']) ? 'high' : $this->_meta_box['priority'];

    foreach($this->_meta_box['pages'] as $page)
    {
        if($this->_meta_box['value'] == $this->_meta_box['lead'])
        {
            // adds meta box to WP
            add_meta_box($this->_meta_box['id'], $this->_meta_box['title'], array(&$this, 'show_meta_boxes'), $page, $this->_meta_box['context'], $this->_meta_box['priority']);
        }
    }
}

Hope I explained well enough what the issue is. I have looked all around and have tried hacking a few things around, but I'm not sure if this a problem I can solve myself. Any input on this, or a nudge in the right direction would be a HUGE help. Thank you!

PS: I was also thinking of doing this through JS instead, but not sure where to start from there.

Answer 1

This can be easily solved with jQuery, and it has the advantage of real-time feedback.

I've already covered this situation in a couple of questions, so instead of going through your code and writing the proper functions, I suggest you go through my code and adapt it to your needs.

• meta content on required pages
  (used in Pages, checks for the parent page and show/hide the Featured Image meta box according to defined IDs)
• How to add or remove metabox each page separately?
  (used in Pages checking for the page template and show/hide the Featured Image meta box, and used in Posts checking for selected categories to show/hide the FI meta box)

Answer 2

I've tried with jQuery but my code is hard to maintain and cannot reusable, so I've taken several hours to look for a plugin and found Meta Box Conditional Logic.

For your meta box, if you use Meta Box Conditional Logic, just update your code to:

$meta_boxes[] = array(
    'id' => 'standard_lead',
    'title' => 'Standard Lead',
    'pages' => array('page'),
    'context' => 'normal',
    'priority' => 'high',
    'show' => array('lead', 'value_one'),
    'fields' => array(
        array(
            'type' => 'text',
            'id' => $prefix . 'standard_title',
            'name' => 'Lead Title',
            'desc' => 'The title of your Standard Lead',
            'width' => '100'
        ),
        array(
            'type' => 'textarea',
            'id' => $prefix . 'standard_content',
            'name' => 'Lead Content',
            'desc' => 'The content of your Standard Lead (you can use HTML)',
            'width' => '100'
        )
    )
);

This is the plugin link: https://metabox.io/plugins/meta-box-conditional-logic/