-------------------------------------------------------------------------------------------------------------+
 INTRO
-------------------------------------------------------------------------------------------------------------+


 This shows the basics of expanding menus with e107

 It makes use of e107s built in javascript 'expandit'


-------------------------------------------------------------------------------------------------------------+
 THE VERY BASICS NEEDED TO CREATE AN EXPANDING MENU
-------------------------------------------------------------------------------------------------------------+

 - Something to click on which is normally always visible:


   <div onclick=\"expandit('exp_menu_1')\">
   CLICK HERE
   </div>


 - The content to expand and collapse:


   <div id='exp_menu_1'>
   CONTENT
   </div>


-------------------------------------------------------------------------------------------------------------+
 MULTIPLE EXPANDING MENU
-------------------------------------------------------------------------------------------------------------+

 - First we must have a unique id:


   global $expand_menu_counter;
   $expand_menu_counter += 1;


 - Next we must use that unique id to link where you click to whats going to change:


   <div onclick=\"expandit('exp_menu_$expand_menu_counter')\">
   CLICK HERE
   </div>

   <div id='exp_menu_$expand_menu_counter'>
   CONTENT
   </div>


-------------------------------------------------------------------------------------------------------------+
 CHANGE THE CURSOR STYLE TO A HAND
-------------------------------------------------------------------------------------------------------------+

 - You use the CSS attribute 'cursor' and set it to 'pointer', do not use 'hand' as that is IE specific.


   <div style='cursor:pointer'>
   CLICK HERE
   </div>


-------------------------------------------------------------------------------------------------------------+
 MAKING ALL MENUS COLLAPSED BY DEFAULT
-------------------------------------------------------------------------------------------------------------+

 - You use the CSS attribute 'display' and set it to 'none'.


   <div onclick=\"expandit('exp_menu_$expand_menu_counter')\">
   CLICK HERE
   </div>

   <div id='exp_menu_$expand_menu_counter' style='display:none'>
   CONTENT
   </div>

   
-------------------------------------------------------------------------------------------------------------+
 MAKING SOME MENUS COLLAPSED BY DEFAULT
-------------------------------------------------------------------------------------------------------------+

 - This requires identifying one menu from another, in this case by its title.


   function tablestyle($caption, $text)
   {
     $expand_autohide_list = array("Weather", "Online");

     if (in_array($caption, $expand_autohide_list))
     {
       $expand_autohide  = "display:none";
       $caption         .= " - Click To Expand";
     }
     else
     {
       $expand_autohide  = "";
     }

     echo "
     
     <div onclick=\"expandit('exp_menu_1')\">
       $caption
     </div>

     <div id='exp_menu_1' style='$expand_autohide'>
       CONTENT
     </div>

     ";
   }


-------------------------------------------------------------------------------------------------------------+
 AN EXAMPLE OF ALL THE ABOVE WITHIN AN E107 THEME
-------------------------------------------------------------------------------------------------------------+


  function tablestyle($caption, $text)
  {
    global $expand_menu_counter;
    $expand_menu_counter += 1;

    $expand_autohide_list = array("Weather", "Online");
  
    if (in_array($caption, $expand_autohide_list))
    {
      $expand_autohide  = "display:none";
      $caption         .= " - Click To Expand";
    }
    else
    {
      $expand_autohide  = "";
    }
    
    echo "<div style='cursor:pointer' onclick=\"expandit('exp_menu_$expand_menu_counter')\">
            <table>
                <tr>
                    <td> $caption </td>
                </tr>
            </table>
          </div>
          
          <div id='exp_menu_$expand_menu_counter' style='$expand_autohide'>
            <table>
                <tr>
                    <td> $text </td>
                </tr>
            </table>
          </div>
      
          <table>
              <tr>
                  <td> <br /> </td>
              </tr>
          </table>";
  }


-------------------------------------------------------------------------------------------------------------+