Blog, JavaScript, PHP

Create a Select Menu With Hidden Divs From an Array With PHP

As an alternative to using tabs, and as a genuine means of returning selective content on WordPress pages, we'll often use a select menu to return various types of hidden content to a page. If you're using our client plugin you'll be familiar with the experience since we'll routinely show the select menu as an alternative to tabs when the content itself is returned via a tab.

The result of our simple function is as follows (select a new option):

This is the content in the entry DIV.

The PHP Function

You will want to alter the following function to suit your own purpose.

<?php

Create Visible Div Select Menu

https://www.beliefmedia.com.au/hidden-div-select-menu

function beliefmedia_select_div($array, $name = 'workflow') {

if (empty($array) || !is_array($array)) return false;

foreach ($array AS $key => $div) {

$options .= '<option value="' . $key . '">' . $div['title'] . '</option>';

$style = ($key == 0) ? '' : 'display:none;';

$div_content .= '<div id="bmStage_' . $key . '" class="bmStage" style="' . $style . '">' . $div['content'] . '</div>';

}

/* Return Content */

$return = '<select id="' . $name . '">' . $options . '</select>';

$return .= '

<p style="margin-left: 30px;">' . $div_content . '';

/* Requires jQuery */

$return .= '<script type="text/javascript">

$("#' . $name . '").on(\'change\', function() {

var value = $(this).val();

if (value) {

$(".bmStage").hide();

$("#bmStage_" + value).show();

}

});

</script>';

return $return;

}

The function requires an array of data that includes the select menu titles and the DIV content. The array we used in our example is as follows:

$array = array(

'0' => array('title' => 'Entry Div', 'content' => 'This is the content in the entry DIV.'),

'1' => array('title' => 'First Div', 'content' => 'This is the content in the first DIV.'),

'2' => array('title' => 'Second Div', 'content' => 'This is the content in the second DIV.'),

'3' => array('title' => 'Third Div', 'content' => 'This is the content in the third DIV.'),

'4' => array('title' => 'Fourth Div', 'content' => 'This is the content in the fourth DIV.'),

'5' => array('title' => 'Fifth Div', 'content' => 'This is the content in the fifth DIV.')

);

If you were to use our example function you would return the menu with the following:

echo beliefmedia_select_div($array);

The jQuery function negates the need to include laborious if/else statements... so it doesn't matter how many block of content you wish to return; whatever is provided via the array will be rendered into your menu.

Download

Our example above may be downloaded below.

Title: Select Menu With Hidden Divs
Description: Create a Select Menu With Hidden Divs From an Array With PHP. Working example.
Download • Version 0.1, 913.0B, zip, Category: PHP Code & Snippets

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.