Skip to content

Instantly share code, notes, and snippets.

@jtsternberg
Last active May 11, 2017 20:30
Show Gist options
  • Save jtsternberg/bc59ef4eda8cc5c4cc3c to your computer and use it in GitHub Desktop.
Save jtsternberg/bc59ef4eda8cc5c4cc3c to your computer and use it in GitHub Desktop.
hidden-toggle for cmb. Works like the WordPress metabox toggle (but for only a selection of fields)
.advanced-toggle .toggle-label {
cursor: pointer;
display: block;
line-height: 3em;
border-bottom: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
padding-left: .8em;
}
.advanced-toggle .inside .cmb-row {
padding: 1.4em 0;
}
.advanced-toggle:before {
display: block;
float: right;
clear: both;
}
#normal-sortables .advanced-toggle .inside {
padding-top: 1em;
}
#normal-sortables .advanced-toggle .inside .cmb-row {
padding: 1.8em 0;
}
.js .meta-box-sortables .postbox .advanced-toggle.closed .handlediv:before {
content: \'\f140\';
}
jQuery(document).ready(function($){
$( ".advanced-toggle" ).children("small.toggle-label, .handlediv").click(function(){
var $this = $(this);
var $parents = $this.parents( ".advanced-toggle" );
if ( $parents.hasClass( "closed" ) ) {
$parents.removeClass( "closed" );
$this.siblings( ".inside" ).show();
} else {
$parents.addClass( "closed" );
$this.siblings( ".inside" ).hide();
}
});
});
<?php
if ( file_exists( __DIR__ .'/cmb2/init.php' ) ) {
require_once __DIR__ .'/cmb2/init.php';
} elseif ( file_exists( __DIR__ .'/CMB2/init.php' ) ) {
require_once __DIR__ .'/CMB2/init.php';
}
add_filter( 'cmb2_meta_boxes', 'cmb2_sample_metaboxes' );
/**
* Define the metabox and field configurations.
*
* @param array $meta_boxes
* @return array
*/
function cmb2_sample_metaboxes( array $meta_boxes ) {
// Start with an underscore to hide fields from custom fields list
$prefix = '_cmb2_';
$hidden_open = '
<div class="advanced-toggle advanced-toggle-wrap closed">
<div class="handlediv" title="' . __( 'Click to toggle', 'cmb2' ) . '"><br></div>
<small class="toggle-label"><span>' . __( 'Toggle Advanced Options', 'cmb2' ) . '</span></small>
<div class="inside">
';
$hidden_close = '</div></div>';
/**
* Sample metabox to demonstrate each field type included
*/
$meta_boxes['test_metabox'] = array(
'id' => 'test_metabox',
'title' => __( 'Test Metabox', 'cmb2' ),
'object_types' => array( 'page', ), // Post type
'fields' => array(
array(
'name' => __( 'Test Text', 'cmb2' ),
'desc' => __( 'field description (optional)', 'cmb2' ),
'id' => $prefix . 'test_text',
'type' => 'text',
),
array(
'before_row' => $hidden_open,
'name' => __( 'Some advanced feature to be hidden by default', 'cmb2' ),
'id' => $prefix . 'advanced_1',
'type' => 'textarea_small',
),
array(
'name' => __( 'Another advanced feature to be hidden by default', 'cmb2' ),
'id' => $prefix . 'advanced_2',
'type' => 'text',
'after_row' => $hidden_close,
),
array(
'name' => __( 'Test Text Small', 'cmb2' ),
'desc' => __( 'field description (optional)', 'cmb2' ),
'id' => $prefix . 'test_textsmall',
'type' => 'text_small',
// 'repeatable' => true,
),
),
);
// Add other metaboxes as needed
return $meta_boxes;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment