Code examples in tabs

[susannecm]

I am working on a REST API documentation. It should include code examples in both curl and Java. I want to present these examples in tabs, and I have installed the com.oxygenxml.wh.tabs plugin from the blog for this purpose. The result initially appears as expected, but I can only view the first example. When I click on the second tab, it is not activated. This applies to my customized output and the default WebHelp. Can anybody help me with that?

[marius]

Hello,

Starting with version 27 of Oxygen you can achieve this without installing an additional plugin.
To present code examples (such as curl and Java) in tabs within your REST API documentation, you can use the @outputclass="wh-tabbed" attribute on certain elements. This will render the content as tabs in the WebHelp output.

For example, you can use an unordered list (<ul>) and assign the wh-tabbed output class. Each list item will become a tab, and the tab name will be taken from the first <ph> (phrase) element inside each item. Here’s a sample structure:

Code: Select all

<ul outputclass="wh-tabbed">
  <li>
    <ph>curl</ph>
    <pre>
      curl -X GET "https://api.example.com/resource"
    </pre>
  </li>
  <li>
    <ph>Java</ph>
    <pre>
      HttpURLConnection con = (HttpURLConnection) new URL("https://api.example.com/resource").openConnection();
      con.setRequestMethod("GET");
    </pre>
  </li>
</ul>

This will display two tabs: one for curl and one for Java, each showing the corresponding code example. You can use a similar approach with definition lists (<dl>) or choice tables (<choicetable>).

For more details and examples, see: How to Display Certain Elements as Tabs.

Best regards,
Marius

[susannecm]

That's much better than a plugin, thanks!