Chap WordPress theme
Chap

Tabs

Tabs shortcode arguments
Classes
Typeprimary secondary pointing tabular text pagination
Sizemini tiny small medium large big huge massive
Alignmentleft aligned right aligned
Attachmenttop attached bottom attached
tab_classesClasses for all child items.
Tab shortcode arguments
Classes
Stateactive disabled
Positionright
titleTab title.
iconIcon (classes) to use in the title.
labelText for a label to use in the title.
label_classesClasses for a label to use in the title.
Tabs are converted to accordions on AMP pages.
Basic tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Basic pointing tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs pointing]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab active title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]

Notes

Adding an .active class can make another tab active by default on page load.
Attached tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs top attached tab_classes="bottom attached"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab disabled title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]

Notes

Adding a .disabled class can disable a tab item.
Attached pointing tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs top attached pointing tab_classes="bottom attached"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Tabular attached tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs top attached tabular tab_classes="bottom attached"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Secondary tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs secondary]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Secondary basic tabs with basic content

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs secondary tab_classes="basic paddingless"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Secondary pointing tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs secondary pointing]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Secondary pointing basic tabs with basic content

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs secondary pointing tab_classes="basic paddingless"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]
Tabular right aligned tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content

Tab 4 title

Tab 4 content
[tabs top attached tabular tab_classes="bottom attached"]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab right title="Tab 3 title"]Tab 3 content[/tab]
  [tab right title="Tab 4 title"]Tab 4 content[/tab]
[/tabs]

Notes

Adding the .right class to the tab makes it's item float right.
Compact tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs compact]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]

Notes

Adding the .compact class prevents the menu from extending to full width.
Compact center aligned tabs

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs compact center aligned]
  [tab title="Tab 1 title"]Tab 1 content[/tab]
  [tab title="Tab 2 title"]Tab 2 content[/tab]
  [tab title="Tab 3 title"]Tab 3 content[/tab]
[/tabs]

Notes

Compact menu can be center aligned.
Portfolio example

2011

Job name

Read more

Job name

Read more

Job name

Read more

Job name

Read more

2012

Job name

Read more

Job name

Read more

Job name

Read more

2013

Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.

2014

Projects 2016

Job name

Read more

Job name

Read more

Job name

Read more

Job name

Read more

Projects 2015

Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.

Project 2014

Lorem ipsum
Dolor sit amet 332.
Eu nec esse splendide
7+ mel meis tollit
Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.

Projects 2013

2015

Job name

Read more

Job name

Read more

Job name

Read more

2016

Job name

Read more

Job name

Read more

Job name

Read more

Job name

Read more

2017

Job name

Read more

Job name

Read more

Job name

Read more
[tabs huge horizontal bulleted center aligned link list tab_classes="basic paddingless"]
  [tab title="2011"]
    [grid four column stackable]
      [column]
        [dimmer image="//placehold.co/300x240"]
          [header inverted]Job name[/header]
          [button inverted link="#"]Read more[/button]
        [/dimmer]
      [/column]
      [column]
        [dimmer image="//placehold.co/300x240"]
          [header inverted]Job name[/header]
          [button inverted link="#"]Read more[/button]
        [/dimmer]
      [/column]
      [column]
        [dimmer image="//placehold.co/300x240"]
          [header inverted]Job name[/header]
          [button inverted link="#"]Read more[/button]
        [/dimmer]
      [/column]
      [column]
        [dimmer image="//placehold.co/300x240"]
          [header inverted]Job name[/header]
          [button inverted link="#"]Read more[/button]
        [/dimmer]
      [/column]
    [/grid]
  [/tab]
  [tab title="2012"]
    ...
  [/tab]
  [tab title="2013"]
    ...
  [/tab]
  [tab title="2014"]
    [page title="Portfolio" wpautop="false"]
  [/tab]
  [tab title="2015"]
    ...
  [/tab]
  [tab title="2016"]
    ...
  [/tab]
  [tab title="2017"]
    ...
  [/tab]
[/tabs]

Notes

Tabs can contain other shortcodes.
Tabs with icons

Tab 1 title

Tab 1 content

Tab 2 title

Tab 2 content

Tab 3 title

Tab 3 content
[tabs]
  [tab title="Tab 1 title" icon="home"]Tab 1 content[/tab]
  [tab title="Tab 2 title" icon="red fire"]Tab 2 content[/tab]
  [tab title="Tab 3 title" icon="mail"]Tab 3 content[/tab]
[/tabs]
Tabs with labels

Tab 1 title
12

Tab 1 content

Tab 2 title
Blue

Tab 2 content

Tab 3 title
23

Tab 3 content
[tabs]
  [tab title="Tab 1 title" label="12"]Tab 1 content[/tab]
  [tab title="Tab 2 title" label="Blue" label_classes="blue"]Tab 2 content[/tab]
  [tab title="Tab 3 title" label="23" label_classes="circular teal"]Tab 3 content[/tab]
[/tabs]