Tabs and Accordions

Bootstrap based tabs and accordions are a great way to display similar information without taking to much space on your content.

Tab Content 1 goes here
Tab Content 2 goes here
Tab Content 3 goes here

 

Shortcode:

[official_tab id="official-tabs" nav="tabs"]
[official_tab_item title="Tab 1"]Tab Content 1 goes here[/official_tab_item]
[official_tab_item title="Tab 2"]Tab Content 2 goes here[/official_tab_item]
[official_tab_item title="Tab 3"]Tab Content 3 goes here[/official_tab_item]
[official_tab]

 

Tabs – Options and Suggestions
  • To have multiple tabs instances on one page you must use an unique “id” attribute for each tabs shortcode. For one tabs instance you are not required to have a attribute “id”
  • For “nav” attribute you may use either tabs or pills to change the navigation-links look

Accordions

Just like Tabs, Bootstrap based accordion offers you some great possibility to display similar information in a collapsible way, for example your F.A.Q
 

Your Content goes here
Your Content goes here
Your Content goes here

 

Shortcode:

[official_accordion id="official-accordion"]
[official_accordion_panel title="Accordion Panel" active="in"]Your content goes here[/official_accordion_panel]
[official_accordion_panel title="Accordion Panel"]Your content goes here[/official_accordion_panel]
[official_accordion_panel title="Accordion Panel"]Your content goes here[/official_accordion_panel]
[/official_accordion]

 

Accordion – Options and Suggestions
  • To have multiple accordion instances on one page you must use an unique “id” attribute for each accordion shortcode. For one accordion instance you are not required to have a attribute “id”
  • Use the attribute “active=”in” to make one of the accordion