Latest Register Log In

+ Advanced Search

Tabbed Details Page

Tabbed Details Page
12/17/09 (Edited 03/11/14)

Sometimes, instead of using the big all-purpose listings 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>

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).

Description Splitting the listing details into tabs.
Views 466 views. Averaging 0 views per day.
Similar Listings