Edit online

How to Display Certain Elements as Tabs

Customization CSS Styling

It is possible to display the following elements as tabs in the WebHelp output:

Lists (both <ol> and <ul> elements)
Definition lists (<dl> element)
Choice tables (<choicetable> element)

For this, you just need to add the @outputclass="wh-tabbed" attribute on the element.

Note:

The tab name is extracted from:

The first <ph> in lists.
The first <dt> in definition lists.
The first <choption> in choice tables.

Here are some examples:

List
Definition List
Choice Table

<ul outputclass="wh-tabbed">
    <li>
        <ph>Windows</ph>
        <ol>
            <li>First instruction for Windows</li>
            <li>Second instruction for Windows</li>
        </ol>
    </li>
    <li>
        <ph>Linux</ph>
        <ol>
            <li>First instruction for Linux</li>
            <li>Second instruction for Linux</li>
            <li>Third instruction for Linux</li>
        </ol>
    </li>
    <li>
        <ph>Mac</ph>
        <ol>
            <li>First instruction for Mac</li>
            <li>Second instruction for Mac</li>
        </ol>
    </li>
</ul>

<dl outputclass="wh-tabbed">
    <dlentry>
        <dt>Version 1</dt>
        <dd>Instructions for Version 1</dd>
    </dlentry>
    <dlentry>
        <dt>Version 2</dt>
        <dd>Instructions for Version 2</dd>
    </dlentry>
</dl>

<choicetable outputclass="wh-tabbed">
    <chrow>
        <choption>First</choption>
        <chdesc>First option description</chdesc>
    </chrow>
    <chrow>
        <choption>Second</choption>
        <chdesc>Second option description</chdesc>
    </chrow>
</choicetable>

The outputs will be as follows:


Windows Linux Mac First instruction for Windows Second instruction for Windows First instruction for Linux Second instruction for Linux Third instruction for Linux First instruction for Mac Second instruction for Mac	Version 1 Version 2 Instructions for Version 1 Instructions for Version 2