Topics

Tabs in HTML output #HTML #Oxygen

patford12@...
 

I was wondering how you would create tabs inside of a DITA output, I was watching this video [14:36](https://youtu.be/6XpY846v1B0?t=876) but couldn't figure out how to get the same results. How would I go about creating tabs? If anyone could point me to resources that I could teach myself this and other higher-level DITA, that would be great too.

Mica Semrick
 

You don't so this in dita per-se, but rather in your output plugin. For instance, bootstrap provides code and markup to make tabs. You could use and outputclass in your DITA to hook into some bootstrap functionality.

-m


On December 4, 2019 10:15:56 AM PST, patford12@... wrote:
I was wondering how you would create tabs inside of a DITA output, I was watching this video [14:36](https://youtu.be/6XpY846v1B0?t=876) but couldn't figure out how to get the same results. How would I go about creating tabs? If anyone could point me to resources that I could teach myself this and other higher-level DITA, that would be great too.

Radu Coravu
 

Hi,

Mica is right, the plugin makes use of the bootstrap Javascript framework.

My colleague Cristian (who presented that video you are following) made the DITA OT plugin which allows tabbing code blocks in the published HTML output available for free on GitHub:

https://github.com/oxygenxml/dita-wh-codeblock-tabs

The plugin works only with Oxygen WebHelp Responsive output but it can probably be changed to work with any type of HTML output which uses the Bootstrap framework.

Regards,
Radu

Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

On 12/4/2019 9:51 PM, Mica Semrick wrote:
You don't so this in dita per-se, but rather in your output plugin. For instance, bootstrap provides code and markup to make tabs. You could use and outputclass in your DITA to hook into some bootstrap functionality.
-m
On December 4, 2019 10:15:56 AM PST, patford12@... wrote:
I was wondering how you would create tabs inside of a DITA output, I
was watching this video
|[14:36](||https://youtu.be/6XpY846v1B0?t=876||) |but couldn't
figure out how to get the same results. How would I go about
creating tabs? If anyone could point me to resources that I could
teach myself this and other higher-level DITA, that would be great too.

patford12@...
 

Radu,

Tell your colleague Cristian, thank you for making such a great tool. I was able to modify the xsl file. I wanted to show version control in a few of our documents and the tabs are a nice way to keep users on one page but see multiple versions. 

I am hoping to expand the function of the plugin to affect more than just block codes but this is a great step in the right direction.

Regards,

Patrick Rachford

Radu Coravu
 

Hi Patrick,

Glad you find the plugin useful.
If at some point you will want to contribute any enhancement to the plugin you can open a pull request for that.

Regards,
Radu

Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

On 12/5/2019 6:05 PM, patford12@... wrote:
Radu,
Tell your colleague Cristian, thank you for making such a great tool. I was able to modify the xsl file. I wanted to show version control in a few of our documents and the tabs are a nice way to keep users on one page but see multiple versions.
I am hoping to expand the function of the plugin to affect more than just block codes but this is a great step in the right direction.
Regards,
Patrick Rachford