Tabbed content

From Open-Realty Wiki

Tab Panes can be created in any Open-Realty 2 template file. If creating a Tab Pane in the main template you must ensure it is given a different ID than tab panes used in other template files. If you fail to provide seperate ID's the Tab Panes may not appear and function as expected.

Create Tab Pane

The Tab Pane is a division which contains the content of the tab pane known as Tab Pages.

Use the following code to create the Tab Pane:

    <div class="tab-pane" id="tabPane1">
    <script type="text/javascript">tp1 = new WebFXTabPane( document.getElementById( "tabPane1" ) );</script>
    CONTENT
    </div>

div: The div is the container for the Tab Pane and all of the Tab Pages. The class must be set to "tab-pane". The div id is the ID of this Tab Pane and must be defined. If you have more than one Tab Pane in a template you MUST use different ID's for each Tab Pane.

Javascript: The Javascript identifies the div id that will be used for this Tab Pane. In this case tp1 identifies that we are using div id "tabPane1" for this tab pane. You will use "tp1" in the Tab Page code to add each Tab Page to this Tab Pane.

CONTENT: This is where you will place the code for your Tab Pages (see below)

Create Tab Pages

    <div class="tab-page" id="tabPage1">
    <h2 class="tab">Details</h2>
    <script type="text/javascript">tp1.addTabPage( document.getElementById( "tabPage1" ) );</script>
    CONTENT
    </div>

div: The div is the container for the Tab Page. The class must be set to "tab-page". The div id is the ID of this Tab Page and must be defined. The id for each subsequent Tab Page should be sequential in order to keep things easy to understand.

h2: This heading is the title for this Tab Page. The class must be set to "tab".

Javascript: This Javascript adds the Tab Page to the Tab Pane. You will need to modify the "tabPage1" with the ID of this Tab Page division.

CONTENT: This is where you will place all of your HTML content, Open-Realty Template tags and other content for this Tab Page.

Examples

For further assistance and examples for creating your own Tabbed content in your Open-Realty Templates check the coding of the included Tabbed Listing Detail Template.