An expandable div is simply a box with hidden content, but it can be revealed by clicking a button. It is great anywhere that you want lots of detailed information to be readily available but not cluttering the page. For example, you might build a dashboard that contains data about new users, system performance, and some administrative tools. You won’t always want all of this data cluttering the view but it would be nice to be able to toggle a section open as needed. This is a simplified example meant to be used as a whole if it is needed in a small application. For larger applications you should break the code out and fit it into the system as a whole. I will explain the usage for the latter.
<?php
$html = <<<HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function toggle_expander(id){
var content = jQuery('#expander_'+id+'_content');
if(content.attr('style') == 'display: none;'){
content.css('display','block');
}else{
content.css('display','none');
}
}
</script>
<style>
.expander_outer{
border: solid 1px;
}
.expander_toggler{
background-color: #CCCCCC;
}
.expander_content{
background-color: #EEEEEE;
}
</style>
HTML;
$html .= expander(1,'Toggle','MY CONTENT');
echo $html;
function expander($id,$toggler,$content){
$expander = '<div class="expander_outer">';
$expander .= '<div id="'.$id.'_expander_toggler" class="expander_toggler" onClick="toggle_expander(\''.$id.'\')" style="cursor:pointer;">';
$expander .= $toggler;
$expander .= '</div>';
$expander .= '<div id="expander_'.$id.'_content" class="expander_content" style="display: none;">';
$expander .= $content;
$expander .= '</div>';
$expander .= '</div>';
return $expander;
}
On line 4 we are including jQuery. Any version should work with this expandable div. I recommend moving this code into your header or just deleting it if you already include jQuery.
The main operation of the toggler is handled on lines 5 through 14. It is very simple. It just gets the display attribute for the content and sets it to either block or none, depending on its current state.
Line 15 through 25 can be removed. I added this to make the operation more obvious in the screenshots. You should add your own styling to make this element match your application.
The expander function is called on line 28. The first parameter is an id that must be unique for your system. There are a number of ways to make this happen, but the easiest is to keep track of a global variable with the id or to put this function in a class and keep the id in a static property. The second parameter is simply the name of the toggler button. Finally the content is passed into the third parameter.
Finally, the expander function is implemented from line 32 to 42. Notice that the id is used to keep the toggler unique so you can have multiple instances of this expandable div.
The structure is made up of 3 divs. The outer div can be excluded entirely if desired. It was only added to provide a border around the whole structure.
And that is it. It’s that simple. See the screenshots below for the result.
This is the toggler with the expandable content hidden.
Click Toggle to open the expandable content below. Then you may click Toggle again to close it.
