Tabs Shortcodes

About Tabs

Tabs are a nice way to organize content into a visual pleasing format which also encourages the user to engage with the website.

Tabs Shortcodes

The underlying HTML code which makes up the Tabs interface utilizes three parts in the following order:

1. the outer container
2. the tabs
3. the content containers

So, using our shortcodes we will build our content tabs using three shortcodes. We then make sure that the content container’s ID is equal/same to the tab ID we want it matched with.

1. [mytabs] = The outer container.
   – The closing shortcode tag will go at the very end of our content.
2. [tab id=" "] = the tabs
   – Create an unordered list immediately after the opening tag (#1).
   – Each item in the list will be a tab.
   – Give each tab it’s own unique ID.
   – Close out the list before starting our content containers (#3).
3. [mtbox id=" "] = the content containers
   – Create one of these with a matching “id” for each tab created in step #2.