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 complimentary 650-page guide on marketing for mortgage brokers. We'll show you exactly how we generate billions in volume for our clients.

Timezone: 1 · [ CHANGE ]

Want a No Obligation Discussion?

RELATED READING

Collins Street looking east from Queens Street, Melbourne, 1883

Like this article?

Martin Khoury

Martin is the Managing Director of BeliefMedia Pty Limited, and Australia's leading Finance Marketing Specialist. He is supported by a team of Australia's finest. Read more about Marty here.

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

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

The PHP Function

Download

RELATED READING

An Easier Way for Licence Holders, Aggregators, and Franchises to Manage Website Compliance Statements

What is the Purpose of the Website Streets Module?

The Future of Mortgage Aggregation

Like this article?

Martin Khoury

Leave a comment