Outlining implementation

There are several possibilities if one wants to be able to hide/show content under control of the user. One could use JavaScript exclusively, but that relies on the browser implementing it (not too much of a concern these days), and the user enabling it (somewhat more of a concern due to security worries). So, if the content is to be controlled without a local script, then server-side code has to be used. Once that is said, there are still some options.

The method chosen here was to use the CSS display:none property/value pair to hide content. This means that all the content is sent each time the page is re-loaded (and it is reloaded every time a change is requested, not so good for dial-up users!), but the styles attached to the content change. An alternative would have been to send content only when it is to be shown, however some trickier, easier to mess up, PHP would be required to do it this way: in other words, “{” / “}” pairs, or, if:/endif; statements would have to be managed carefully.

The code also shows how <form> controls can be nicely styled to look much less clunky. (Look at the CSS for the “.RScontrols input” style.)

The PHP functions:

// Produce code that hides/shows a section of "content". Provides a heading
//   box, which stays the same, and which has built-in controls to:
//    0 show no sections            = display this section
//    < display previous section    > display next section
// Args: $title: string to use in heading box
//       $sect: section number for the present section,
//       $disp: the chosen display number.
function Outline($title,$sect,$disp){
  $prev=$sect-1; if ($prev <1) $prev=99;
  $next=$sect+1;
  $self = basename($_SERVER['SCRIPT_NAME']);
  echo "<a name=\"0_$sect\"></a>
  <table width='100%' class='hdg'>
    <tr><td>
      <div>
        <h3><span class='blue'>$sect</span> $title</h3>
      </div>
    </td>
    <td width='23%'>
      <div class='RScontrols'>";
      if (!($disp==0)) echo 
         /* conditionaly produce form that is the "none" button */ 
       "<form action='$self#0_0' method='post'> 
        <input type='submit' value='0'>
        <input type='hidden' name='disp' value='0'>
        </form>";
    echo /* produce form that is the "<" button */
       "<form action='$self#0"."_$prev' method='post'>
          <input type='submit' value='<'>
          <input type='hidden' name='disp' value='$prev'>
        </form>";
    echo /* produce form that is the "=" button */
       "<form action='$self#0"."_$sect' method='post'> 
          <input type='submit' value='='>
          <input type='hidden' name='disp' value='$sect'>
        </form>";
    echo /* produce form that is the ">" button */
       "<form action='$self#0"."_$next' method='post'> 
          <input type='submit' value='>'>
          <input type='hidden' name='disp' value='$next'>
        </form>
      </div>
    </td></tr>
  </table>";
}

function ShowContent($disp,$sect){
  if(!(($disp==$sect) | ($disp==99)))echo 'class=\"off\"';
}

Some details:

• Each button is a complete form composed of the <form> tag, one <input> tag with type=hidden, and one <input> tag with type=submit;
• Two PHP variables are the key to deciding what to display: $sect is set to 1 before any calls to Outline() and represents the id number of a section of code that can be expanded. The other variable, $disp, is POSTed, with appropriate values, by the <form>s and is compared against $sect to tell the PHP code what section to expand. $disp can also have the values 0 (none displayed) or 99 (all displayed).
• An anchor link is defined at the heading: when a section is selected, that link will bring the title to the top of the browser's window through the action attribute of the form tag. (This depends on the amount of rendered content above and below the expanded section: at the very least it will ensure that the start of the content is in-window.);
• The method can be (and has been) expanded to handle more than one level of expansion.
• The function ShowContent() is just a short-form way of dealing with the “if(!(($disp==$sect) | ($disp==99)))echo 'class=\"off\"'” code that is used in each tag that can be expanded. Note that the CSS class “off” must exist (with display:none) for this to work. This could be changed to use echo 'style=\"display:none;\" instead;

How to use the functions:

<div class='outline'>
<?php $sect = 1; Outline("A demonstration of outlining. Click on...",
                            $sect);?>
<ul <?php ShowContent($disp,$sect)?>>
  <li>This is a list</li>
  <li>that has been hidden.</li>
</ul>
<?php $sect++; Outline("the buttons at the right to see what happens.",
                          $sect);?>
<p <?php ShowContent($disp,$sect)?>>
This is a paragraph that was hidden 'till you clicked to see it.
</p> 
• • •
</div>

Notes:

• the $sect++ statement increments the section counter: any and all tags between these statements which have the ShowContent() routines in them will be expanded together.