Tabs & Toggles

Less shortcodes and more CLASS

Some Fancy Tabs

Tabs are really useful for breaking up the content into manageable chunks and giving the user options.

Hi, this is the first tab in our little collection of tabs. This theme has these lovely tabs things built in so you can create cool looking content. They give the user control and give you the ability structure content better.

They are really easy to add thanks to our Visual Editor buttons.

In this tab we have added our lovely column grid layout to give us two columns. This will always look nice just slotted into place in this little tab.

blue-xl

And this how we did it:

The tabs are just a ul with class = “tabs”

<ul class="tabs">
	<li><a href="#tab1">Tab 1</a></li>
	<li><a href="#tab2">Tab 2</a></li>
	<li><a href="#tab3">Tab 3</a></li>
</ul>

Each item in the list of tabs has a href set to id of the tab content container div

<div class="tab" id="tab1">
Hi, this is the first tab in our little collection of tabs.
</div>

Some Toggles

Toggles are another way of giving the user the choice of what to view and when.

  • Click to reveal content
    This is some content to show the user when they click the toggle.
  • Another one
    And this is another!
  • How its done

    Again all you need is some simple markup, or just click the button in the visual editor to create it for you.

    <ul class="toggles">
    	<li><a class="toggle" href="#">Click to reveal content</a>
    <div class="panel">This is some content to show the user when they click the toggle.</div></li>
    	<li><a class="toggle" href="#">Another one</a>
    <div class="panel">And this is another!</div></li>
    	<li><a class="toggle" href="#">How its done</a>
    <div class="panel">Again all you need is some simple markup, or just click the button in the visual editor to create it for you.</div></li>
    </ul>
  • Why shortcodes from other themes are bad for you

    Some theme developers on popular theme marketplaces think that the code below is how toggles and tabs etc should be done!!! :-)Just compare the code below to the mark-up we suggest above.

    Poor use of shortcodes make life complicated

    [toggle]
    [tgg_item title="..." active="yes"] ... [/tgg_item]
    [tgg_item title="..."] ... [/tgg_item]
    [tgg_item title="..."] ... [/tgg_item]
    [/toggle]

    Why learn some developer’s crazy shortcode language when you could learn something useful – a few lines of html and css? And actually the html is much simpler.

    Shortcodes are bad for you here because when you upgrade your theme all this content is meaningless. In fact you end up with lots of square brackets in your content.

    And since we give you a button that automatically inserts the basic code for you, classes are way better than shortcodes.