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
 https://www.beliefmedia.com.au/hidden-div-select-menu
5
*/
6
 
7
function beliefmedia_select_div($array, $name = 'workflow') {
8
 
9
 if (empty($array) || !is_array($array)) return false;
10
 
11
 foreach ($array AS $key => $div) {
12
  $options .= '<option value="' . $key . '">' . $div['title'] . '</option>';
13
  $style = ($key == 0) ? '' : 'display:none;';
14
  $div_content .= '<div id="bmStage_' . $key . '" class="bmStage" style="' . $style . '">' . $div['content'] . '</div>';
15
 }
16
 
17
 /* Return Content */
18
 $return = '<select id="' . $name . '">' . $options . '</select>';
19
 $return .= '
20
<p style="margin-left: 30px;">' . $div_content . '';
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

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

  AUS Eastern Standard Time (Virginia)

  Want to have a chat?
 

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