Show/Hide

We include our ‘core’ library, in the header

    <script src="../Include/Core.js" type="text/javascript"></script>
          

The function ssHide() hides an element by sliding it out of view.

ssShow() reveals an element by sliding it into view and ssToggle() is a combination of these two.

In this example, we attach a click event to each of the six little links.

    function preparePage()
    {
      ssAddEvent(document.getElementById("showManagement"), "click", showManagementContent, false);
      ssAddEvent(document.getElementById("hideManagement"), "click", hideManagementContent, false);
      ssAddEvent(document.getElementById("toggleManagement"), "click", toggleManagementContent, false);

      //repeat for players
    }
          

Each of the functions just calls the appropriate function e.g. ssShow(), passing in the id of the element to be
shown/hidden/toggled.

    function showManagementContent(e)
    {
      ssShow("managementContent");
      return ssStopTheRest(e);
    }

    function hideManagementContent(e)
    {
      ssHide("managementContent");
      return ssStopTheRest(e);
    }

    function toggleManagementContent(e)
    {
      ssToggle("managementContent");
      return ssStopTheRest(e);
    }

    //repeat for players
          

There is one small thing to bear in mind with this. If you want an element to initially be hidden on the page (so it can be expanded by the user) you should use class="hiddenInitially" . Don’t use inline style like style="display:none;".