$isCollapsed = (isset($collapsed) && ($collapsed == "true"));
Prepare the php variable "$isCollapsed ", it will be true if the collapsed parameter equals "true" (see 3rd box).
$counterVarName = "expandable-content-counter";
$counter = (isset($GLOBALS[$counterVarName]) ? $GLOBALS[$counterVarName] : 0);
$GLOBALS[$counterVarName] = $counter+1;
First set the name for our global variable (we use a long name to avoid conflicting with other global variables).
The resulting counter (starting at 0) we will use for the id of each box and to determine whether we have to include a static header.
Eventually increment the global variable.
Here we define the id we want to use to identify the div we will use later.
$divStyles = ($isCollapsed ? 'display:none;' : '');
$linkText = ($isCollapsed ? '+' : '−');
Define extra style definition and the text of the link - depending on the initial collapse-state.
if ($counter == 0) {
// this is the first one, include header
echo "<!-- flooble Expandable Content header start -->
<script language=\"javascript\" type=\"text/javascript\">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) {
if (ie4) { return document.all[id]; }
else { return document.getElementById(id); } }
function toggle(link, divId) {
var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->";
}
If this is the first box we have to include a static header which is used by all boxes... this is unchanged beside the escaped quotes.
echo '<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; ">
<table border="0" cellspacing="0" cellpadding="2" width="100%"
style="background: #000000; color: #FFFFFF; ">
<tr><td>'.$title.'</td><td align="right">
[<a title="show/hide" id="'.$id.'_link"
href="javascript:void(0);"
onclick="toggle(this, \''.$id.'\');"
style="text-decoration: none; color: #FFFFFF; ">'.$linkText.'</a>]
</td></tr></table>
<div id="'.$id.'"
style="padding: 3px;'.$divStyles.'">'.$data.'</div>
</div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable
content box is made using a free javascript from flooble</a>
| <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
</noscript>
<!-- flooble Expandable Content box end -->';
Eventually output the code for the box. Here we use previously defined variables like $id, $divStyles and $linkText. In addition we use $data for the content (this is the default variable name ) and $title which is a moslate parameter (you can use any other name if you want).
