When content needs to be divided up into multiple sections, it can often result in either a very long page, or content spread over multiple pages. To prevent this, a tabbed interface for the content can be used. This allows for only one piece of content to be displayed at a time, but keeps the rest of the content obvious and easily-accessible.
Files involved
The contents of each tab are kept in individual files, which can be generated on your PC using software such as Dreamweaver, or through the WYSIWYG editor on the web interface. The WYSIWYG editor option is the preferred way to update files.
If uploading content via the File Manager, it should not contain any HTML headers: No , , etc. - only the actual content that you want included, such as headings and paragraphs ( , for example.) and
For our example, we will create a page called "Special Offers" with two tabs: One for summer and one for winter. This is done via the Custom Page Configuration page. Go to this page, and click on the "New Page" button.
In "Page name", the filename that will appear in the URL should be used. In this case, we'll call it special_offers.html and give it the HTML title of "Our Special Offers". Keywords and description can be left blank unless needed.
Now to add the tabs, simply go to the "Tabs" section and put the title you want the tab to have, such as "Summer Specials", in the "Title" field; and the name of the file that will supply the content: "summer_specials.html". Then click "Add tab" and you should see the new tab appear in the Tabs box. Repeat this process for the winter special offer.
Once both the tabs desired have been added, click the "Save Page" button. The dialogue box will vanish and after a moment the newly-created page will be visible in its own box. Click on it, and the dialogue box will reappear, this time with links beneath the Tabs box that will allow you to edit their content. Click on the 'summer' link to be taken to the WYSIWYG editor. You will be warned that the file does not exist, unless you have already uploaded one. Enter the desired content, and save in the usual way. Repeat the process for the 'winter' tab.
Once both tabs have been populated with content, you can visit the page you have just created and see the tabs in action. What's more, tabbed pages can be accessed directly via the URL: summer_specials.html, winter_specials.html, and special_offers.html are all valid page addresses.