CSS-only Tabs Plug-in

This is a DITA-OT Plug-in used to create CSS-only tabbed dialog within DITA HTML output.

Example

<bodydiv outputclass="tabs small">
  <section id="lorem-ipsum">
    <title>Lorem ipsum</title>
    <p>
      Lorem ipsum dolor sit amet consectetur adipiscing, elit malesuada 
      ligula vehicula netus sollicitudin sociis, feugiat scelerisque luctus 
      parturient pharetra.
    </p>
    <p>
      Dis pretium ante fringilla nunc velit nisi risus primis felis vel, 
      venenatis auctor nascetur viverra non sagittis habitant condimentum 
      integer. Himenaeos iaculis placerat neque nisl sodales faucibus ut
      porttitor maecenas et quam posuere mauris, venenatis tortor scelerisque 
      suspendisse magna malesuada rhoncus commodo feugiat pretium urna just.
     </p>
  </section>
  <section id="dolor-sit-amet">
    <title>Dolor sit amet</title>
    <p>
      Class ornare feugiat arcu parturient lacus mollis purus at, primis turpis
      morbi libero ultricies hendrerit. Volutpat sed ullamcorper bibendum mi
      sagittis ultricies ridiculus sociis nam, dapibus proin curae odio lacus
      est dignissim ad, commodo ornare nec phasellus condimentum laoreet vehicula
      porttitor.
    </p>
    <p>
      Himenaeos nunc aptent massa ridiculus auctor nisi pellentesque maecenas a
      eleifend, fermentum fringilla semper nam viverra vivamus velit metus in
      posuere, conubia tellus venenatis rutrum proin erat enim mi libero.
    </p>
  </section>
</bodydiv>
Figure 1. Sample DITA Input
Figure 2. CSS-only Tabbed Dialog

Install

This is a standalone plug-in without dependencies which can be installed from the command line.

Run the plug-in installation commands: 

dita install https://github.com/jason-fox/fox.jason.extend.css/archive/master.zip
dita install https://github.com/jason-fox/fox.jason.tabs.css/archive/master.zip

The dita command line tool requires no additional configuration.

Usage

An HTML tabbed box is defined using a <bodydiv> element with an @outputclass=tabs. The default size is 400px high. Three other sizes are defined:

  • small - 200px
  • medium - 600px
  • large - 1000px

For each tab, just place a <section> element with a <title> within the <bodydiv> as shown: 

<bodydiv outputclass="tabs small">
  <section id="lorem-ipsum">
    <title>Lorem ipsum</title>
    <p>
      Lorem ipsum dolor sit amet consectetur adipiscing, elit malesuada 
      ligula vehicula netus sollicitudin sociis, feugiat scelerisque luctus 
      parturient pharetra.
    </p>
    <p>
      Dis pretium ante fringilla nunc velit nisi risus primis felis vel, 
      venenatis auctor nascetur viverra non sagittis habitant condimentum 
      integer. Himenaeos iaculis placerat neque nisl sodales faucibus ut
      porttitor maecenas et quam posuere mauris, venenatis tortor scelerisque 
      suspendisse magna malesuada rhoncus commodo feugiat pretium urna just.
     </p>
  </section>
  <section id="dolor-sit-amet">
    <title>Dolor sit amet</title>
    <p>
      Class ornare feugiat arcu parturient lacus mollis purus at, primis turpis
      morbi libero ultricies hendrerit. Volutpat sed ullamcorper bibendum mi
      sagittis ultricies ridiculus sociis nam, dapibus proin curae odio lacus
      est dignissim ad, commodo ornare nec phasellus condimentum laoreet vehicula
      porttitor.
    </p>
    <p>
      Himenaeos nunc aptent massa ridiculus auctor nisi pellentesque maecenas a
      eleifend, fermentum fringilla semper nam viverra vivamus velit metus in
      posuere, conubia tellus venenatis rutrum proin erat enim mi libero.
    </p>
  </section>
</bodydiv>
Figure 3. Usage

When running an HTML based transform, the section will be transformed into a tabbed dialog. e.g.: 

dita --format html5 --output out --input document.ditamap

To alter the CSS, amend the resource/tabs.css file which is copied over as part of the DITA processing.