< Back to Templates

Tabbed Details Page

Sometimes, instead of using the big all-purpose topics detail page WSN ships with, you may want to split off sections into tabs. You can do this by making custom templates for each tab.

For tabs with css classes tab and activetab (for the currently active one), use this tab bar code in each template which is part of the tabs:
<div class="tabset">
<a href="{LINKDETAILSURL}" class="<IF {CURRENTURLCONTAINS[action=detail]} and not {CURRENTURLCONTAINS[custom]}>active</IF>tab">Main</a>
<a href="link.php?action=detail&id={LINKID}&custom=yes&TID=map" class="<IF {CURRENTURLCONTAINS[map]}>active</IF>tab">Map</a>
<a href="link.php?action=detail&id={LINKID}&custom=yes&TID=photos" class="<IF {CURRENTURLCONTAINS[photos]}>active</IF>tab">Photos</a>
</div>

In this example we have custom templates called map and photos which act as the second and third tabs, while the regular details template is the first tab. We can cut and paste the maps and attachments code from the details templates into the custom templates.

Add .tab and .activetab to your stylesheet to style the tabs to look as desired (a background-image is probably the simplest approach to getting a professional look).