GMC:Website:Collapsible Forum Containers

Collapsible Forum Containers

The forum containers on [1] are collapsible, i.e. you can show / hide all forums within a forum category. We added this feature to hide forums that aren't of interest for most of our vistors and to offer a customized view for our frequent visitors.

The modification is part of our closed-source drupal theme where we override the look of drupal's flatforum module.

Here's a sketch of the implementation:

• 100% client-side (JavaScript + client-side cookies)
• The list of forums and forum containers (categories) is a single long table.
• Added a container-specific CSS class to each table row, e.g. class = "container_1" for forums in the first container.
• If you're using jQuery, you can add the show / hide effect easily with:

  <tr onclick="$('tr.container_1').toggle()" id="container_1" ...><td>Gallery 2 Support Forum Category</td></tr>
  <tr class="container_1"><td>Installation Help</td></tr>
  <tr class="container_1"><td>Troubleshooting</td></tr>

This shows / hides all table rows (<tr> tag) that have the "container_1" class.

• To remember which containers to collapse by default, we store the user's preferences in a cookie.
• Implementation detail: To prevent the show / hide effect to be triggered if a user clicks on the forum container link, we need to set event.cancelBubble = true to omit the onclick handler for the normal link anchor clicks. The above snippet is thus a little more complicated in reality:

  <tr onclick="$('tr.' + this.id).toggle()" id="container_1" ...><td><a onclick="event.cancleBubble = true;" href="forum/1">Gallery 2 Support Forum Category</a></td></tr>
  <tr class="container_1"><td><a href="forums/2">Installation Help</a></td></tr>
  <tr class="container_1"><td><a href="forums/3">Troubleshooting</a></td></tr>