Skip to content

Hide and show field condition

Ale Mostajo edited this page Apr 29, 2020 · 1 revision

Use the field option show_if or hide_if to add a condition to the field.

Show If

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'my_select' => [
                                'type' => 'select',
                                'title' => __( 'My select', 'my-domain' ),
                                'options' => [
                                    'a' => __( 'Option A', 'my-domain' ),
                                    'b' => __( 'Option B', 'my-domain' ),
                                    'c' => __( 'Option C', 'my-domain' ),
                                    'd' => __( 'Option C', 'my-domain' ),
                            ],

                            'image' => [
                                'type' => 'media',
                                'title' => __( 'Image' ),
                                'show_if' => [
                                    'my_select' => ['c', 'a'],
                                ],
                            ],

                            'resolutions' => [
                                'type' => 'repeater_open',
                                'show_if' => [
                                    '.custom-css' => 'b',
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}

The show_if holds a list of field IDs or DOM selectors that will act as condition rules to determine when a field should be visible.

Hide If

class Post extends Model
{
    // Class properties and methods...

    protected function init()
    {
        $this->metaboxes = [
            'metabox_id' => [
                'tabs' => [
                    'tab_id' => [
                        'fields' => [

                            'my_select' => [
                                'type' => 'select',
                                'title' => __( 'My select', 'my-domain' ),
                                'options' => [
                                    'a' => __( 'Option A', 'my-domain' ),
                                    'b' => __( 'Option B', 'my-domain' ),
                                    'c' => __( 'Option C', 'my-domain' ),
                                    'd' => __( 'Option C', 'my-domain' ),
                            ],

                            'image' => [
                                'type' => 'media',
                                'title' => __( 'Image' ),
                                'hide_if' => [
                                    'my_select' => ['b', 'd'],
                                ],
                            ],

                            'resolutions' => [
                                'type' => 'repeater_open',
                                'show_if' => [
                                    '#html-selector' => 'a',
                                ],
                            ],

                            // Other fields...
                        ],
                    ],
                ],
            ],
        ];
    }
}

The hide_if holds a list of field IDs or DOM selectors that will act as condition rules to determine when a field should be invisible.