Toggle and Tabs

Tabs

Simple Tabs

Tab One
Tab Two
Tab Three
  • Tab 1 content – A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables.
  • Tab 2content – A good designer knows that tables should not be used for layout.
  • Tab 3 content – HTML enables the creation of well-structured, well-formatted tables.

Tab Sizing

If you want your tabs to run the full width of their container evenly, you can add class of .two-up, .three-up, .four-up, and .five-up to them.

Simpletab 1
Simpletab 2
Simpletab 3
  • Tab 1 content – A good designer knows that tables should not be used for layout, but rather for displaying columns and rows of data. HTML enables the creation of well-structured, well-formatted tables.
  • Tab 2content – A good designer knows that tables should not be used for layout.
  • Tab 3 content – HTML enables the creation of well-structured, well-formatted tables.

How?

[tabgroup size=”three-up”]
[tab title=”Simpletab 1″]Tab 1 content goes here…[/tab]
[tab title=”Simpletab 2″]Tab 2 content goes here…[/tab]
[/tabgroup]

Accordion

  • Accordion 1
  • Accordion 2
  • Accordion 3
  • Accordion 4

Toggle

  • toggle 1

    toggle 1 content goes here

  • toggle 2

    toggle 2content goes here

  • toggle 3

    toggle 3 content goes here

  • toggle 4

    toggle 4 content goes here

How to accordion?

[accordiongroup]
[accordion title=”Accordion 1″]Accordion 1 content goes here[/accordion]
[accordion title=”Accordion 2″]Accordion 2content goes here[/accordion]
[/accordiongroup]

How to toggle?

[togglegroup]
[toggle title=”toggle 1″]Toggle 1 content goes here[/toggle]
[toggle title=”toggle 2″]Toggle 2 content goes here[/toggle]
[/togglegroup]