ExpandCollapse Pattern

Here, we use our ExpandCollapse pattern, the code for which is within ssExpandCollapse.js.

It adds a or icon to the driving element. Clicking on the driving element will slide up or down the driven element and also toggle this icon.

The following files need including in the head of the document...

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

Collapsing

If we want an element to be collapsable (i.e. it is shown initially, and can be collapsed) we give the driving element xxx the class collapse and give the driven element the id xxxDetails.

    <h2 id="players" class="collapse">Players</h2>
    <ul id="playersDetails">
      <li>1. Joe Hart (England)</li>
      <li>2. Micah Richards (England)</li>
      ...
      <li>11. Elano (Brazil)</li>
    </ul>
          

Expanding

If we want an element to be expandable (i.e. it is hidden initially, and can be expanded) we give the driving element xxx the class expand and give the driven element the id xxxDetails, and also give xxxDetails the class hiddenInitially.

    <h2 id="management" class="expand">Management Team</h2>
    <ul id="managementDetails" class="hiddenInitially">
      <li><strong>Manager:</strong> Mark Hughes</li>
      <li><strong>Assistant manager:</strong> Mark Bowen</li>
      ...
      <li><strong>Youth academy director:</strong> Jim Cassell</li>
    </ul>
          

• Note that the line ssAddLoadEvent(ssInitialiseExpandCollapse); is run automatically in ssExpandCollapse.js. This looks for all elements of class ‘expand’ or ‘collapse’ and associates the expand/collapse behaviour to them and their corresponding ‘Details’ elements.
• They do not need to be h2’s and ul’s. It should work for any type of element.
• If you wish to control the width of these elements, it is wise to put the driving and driven element within a parent element and control the width of that using css.