Skip to content

Instantly share code, notes, and snippets.

@JPry
Last active February 21, 2019 13:31
Show Gist options
  • Save JPry/184506fd72999b82e590 to your computer and use it in GitHub Desktop.
Save JPry/184506fd72999b82e590 to your computer and use it in GitHub Desktop.
A Sample CMB2 metabox with fields that show/hide based on other fields. In action: http://screencast.com/t/sXJ9rpOS
// Either create a new empty object, or work with the existing one.
window.JPry_CMB2 = window.JPry_CMB2 || {};
(function( window, document, $, app, undefined ) {
'use strict';
// Cache specific objects from the DOM so we don't look them up repeatedly.
app.cache = function() {
app.$ = {};
app.$.select = $( document.getElementById( 'jpry_sample_selection' ) );
app.$.field = $( document.getElementById( 'jpry_extra_field' ) );
app.$.field_container = app.$.field.closest( '.cmb-row');
};
app.init = function() {
// Store/cache our selectors
app.cache();
// Show the custom container when the selection is 'show-field'
app.$.select.on( 'change', function( event ) {
if ( 'show-field' === $(this).val() ) {
app.$.field_container.show();
} else {
app.$.field_container.hide();
}
} ).trigger( 'change' );
};
$( document ).ready( app.init );
})( window, document, jQuery, JPry_CMB2 );
<?php
/**
* Plugin Name: CMB2 Conditional Hide/Show example
* Plugin URI: https://gist.github.com/JPry/184506fd72999b82e590
* Description: Show an example of using JS to hide and show CMB2 fields based on other fields.
* Version: 1.0.0
* Author: Jeremy Pry
* Author URI: http://jeremypry.com/
* License: GPL2
*/
// Prevent direct access to this file
if ( ! defined( 'ABSPATH' ) ) {
die( "You can't do anything by accessing this file directly." );
}
add_action( 'cmb2_admin_init', 'jpry_cmb2_init' );
/**
* Register CMB2 metabbox and fields.
*/
function jpry_cmb2_init() {
$cmb = new_cmb2_box( array(
'id' => 'jpry_sample_box',
'title' => __( 'JPry Sample Meta Box', 'jpry' ),
'object_types' => array( 'post' ),
) );
$cmb->add_field( array(
'name' => __( 'Sample Selection Drop-Down', 'jpry' ),
'id' => 'jpry_sample_selection',
'desc' => __( 'This is a Sample Selection box. The item you select will show or hide the next field.', 'jpry' ),
'type' => 'select',
'options' => array(
'option-1' => __( 'Option One', 'jpry' ),
'option-2' => __( 'Option Two', 'jpry' ),
'show-field' => __( 'Show Extra Field', 'jpry' ),
),
) );
$cmb->add_field( array(
'name' => __( 'Extra Field', 'jpry' ),
'id' => 'jpry_extra_field',
'desc' => __( 'This extra field will only be shown when the "Show Extra Field" option is selected above.', 'jpry' ),
'type' => 'textarea',
) );
}
add_action( 'admin_enqueue_scripts', 'jpry_enqueue_scripts' );
/**
* Enqueue our script when needed.
*/
function jpry_enqueue_scripts() {
$screen = get_current_screen();
if ( ! isset( $screen->post_type ) || 'post' !== $screen->post_type ) {
return;
}
$script_name = 'cmb2_sample.js';
$url = trailingslashit( plugin_dir_url( __FILE__ ) );
wp_enqueue_script( 'jpry_cmb2_show_hide_example', $url . $script_name, array( 'jquery' ), '1.0.0' );
}
@paolosax
Copy link

Hello JPry - well done, it works just fine!
...now I'm trying to apply this show/hide feature to a group rather than a single input element; I thought that this should work anyway since the js address to the trigger's nearest cmb-row, but don't - but I'm not a js ninja so surely I'm missing something...

Any help is more than welcome
Cheers
Paolo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment