Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggreagtion Enquires Welcome

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.

1
<?php 
2
/*
3
    Create Visible Div Select Menu
4
    <blockquote class="wp-embedded-content" data-secret="HxlwKbVIK5"><a href="https://www.beliefmedia.com.au/hidden-div-select-menu">Create a Select Menu With Hidden Divs From an Array With PHP</a></blockquote><iframe class="wp-embedded-content" sandbox="allow-scripts" security="restricted" style="position: absolute; clip: rect(1px, 1px, 1px, 1px);" title="“Create a Select Menu With Hidden Divs From an Array With PHP” — BeliefMedia Finance & Mortgage Broker Digital Marketing" src="https://www.beliefmedia.com.au/hidden-div-select-menu/embed#?secret=HxlwKbVIK5" data-secret="HxlwKbVIK5" width="600" height="338" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
5
*/
6
 
7
 
8
function beliefmedia_select_div($array, $name = 'workflow') {
9
 
10
    if (empty($array) || !is_array($array)) return false;
11
    
12
    foreach ($array AS $key => $div) {
13
        $options .= '<option value="' . $key . '">' . $div['title'] . '</option>';
14
        $style = ($key == 0) ? '' : 'display:none;';
15
        $div_content .= '<div id="bmStage_' . $key . '" class="bmStage" style="' . $style . '">' . $div['content'] . '</div>';
16
    }
17
 
18
    /* Return Content */
19
    $return = '<p><select id="' . $name . '">' . $options . '</select></p>';
20
    $return .= '<p style="margin-left: 30px;">' . $div_content . '</p>'; 
21
 
22
    /* Requires jQuery */
23
    $return .= '<script type="text/javascript">
24
        $("#' . $name . '").on(\'change\', function() {
25
            var value = $(this).val();
26
            if (value) {
27
                $(".bmStage").hide();
28
                $("#bmStage_" + value).show();
29
            }
30
        });
31
    </script>';
32
 
33
 return $return;
34
}

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:

1
$array = array(
2
        '0' => array('title' => 'Entry Div', 'content' => 'This is the content in the entry DIV.'),
3
        '1' => array('title' => 'First Div', 'content' => 'This is the content in the first DIV.'),
4
        '2' => array('title' => 'Second Div', 'content' => 'This is the content in the second DIV.'),
5
        '3' => array('title' => 'Third Div', 'content' => 'This is the content in the third DIV.'),
6
        '4' => array('title' => 'Fourth Div', 'content' => 'This is the content in the fourth DIV.'),
7
        '5' => array('title' => 'Fifth Div', 'content' => 'This is the content in the fifth DIV.')
8
    );

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

1
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

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

READY TO HAVE A CHAT? CALL US ANYTIME ON 1300 235 433