PHP Xajax Accordian

This amazing tricks builds on the simple Sliding Draw Example by putting a few of them together to create an accordian. These can be fun and functional for displaying everything from content or even an image gallery. Like the previous article you can add whatever transition effects you like with your favourite javascript library. In this example four panels are used with the second panel displayed by default.


<?php

 /*** include the xajax library ***/
 include 'xajax/xajax_core/xajax.inc.php';

 /**
 *
 * @function show
 *
 * @param int showID
 *
 * @return object
 *
 */
 function Show($showID)
 {
    /*** the areas array ***/
    $allAreas=array();
    $allAreas["control1"]="content1";
    $allAreas["control2"]="content2";
    $allAreas["control3"]="content3";
    $allAreas["control4"]="content4";

    /*** a new object response object ***/
    $objResponse=new xajaxResponse();

    /*** the message string ***/
    $str="";
    foreach ($allAreas as $control=>$content)
    {
        /*** if the control == $showID ***/
        if($control==$showID)
        {
            /*** show the panel and set hide value to false ***/
            $str="<div onClick=\"xajax_Show(false);\">Click here to hide.</div>";
            /*** set the display to block ***/
            $objResponse->assign($content, "style.display", "block");
            /*** assign the string to the controls inner HTML ***/
            $objResponse->assign($control, "innerHTML", $str);
        }
        else
        {
            /*** hide the panel ***/
            $str="<div onClick=\"xajax_Show('".$control."');\">Click here to expand.</div>";
            /*** set the display to none ***/ 
            $objResponse->assign($content, "style.display", "none");
            /*** assign the string to the controls inner HTML ***/
            $objResponse->assign($control, "innerHTML", $str);
            }
        }
    return $objResponse;
}

 /*** a new xajax object ***/  
 $xajax=new xajax();
 /*** register the show function ***/
 $xajax->registerFunction("Show");
 /*** process the request ***/
 $xajax->processRequest();
 /*** stuff the xajax javascript into a variable ***/
 $xajax_js = $xajax->getJavascript('/xajax');
?>

<html>
<head>
<title>PHPRO XAJAX Accordian</title>

<?php echo $xajax_js; ?>

<style type="text/css">
<!--
.content_hide
{
    display: none;
    border: solid 1px black;
    width: 300px;
    background-color: #c0c0c0;
    padding-left: 15px;
}

.content_show
{
    display: block;
    border: solid 1px black;
    width: 300px;
    background-color: #9446B3;
    color: white;
    padding-left: 15px;
}

.control {
    background-color: #fff6d7;
    display: block;
    border: solid 1px black;
    width: 300px;
    padding-left: 15px;
}
-->
</style>
<body>
<h2>PHPRO XAJAX Accordion</h2>
<hr />
<h4>Accordion with multiple panels. </h4>
<div class="control" id="control1" onClick="xajax_Show('control1');">Click here to expand.</div>

<div class="content_hide" id="content1">
<p>Lots of content for content one</p>
<p>Lots of content for content one</p>
<p>Lots of content for content one</p>
</div>

<div class="control" id="control2" onClick="xajax_Show('control2');">Click here to expand.</div>
<div class="content_show" id="content2">
<p>Content two is shown by default</p>
<p>Content two is shown by default</p>
<p>Content two is shown by default</p>
</div>

<div class="control" id="control3" onClick="xajax_Show('control3');">Click here to expand.</div>
<div class="content_hide" id="content3">
<p>Lots of content for content three</p>
<p>Lots of content for content three</p>
<p>Lots of content for content three</p>
</div>

<div class="control" id="control4" onClick="xajax_Show('control4');">Click here to expand.</div>
<div class="content_hide" id="content4">
<p>Lots of content for content four</p>
<p>Lots of content for content four</p>
<p>Lots of content for content four</p>
</div>

</body>
</html>