Content Tabs & Toggles

In version 3.1 we've reinserted the "tabs shortcode" into the theme. It can be achieved by writing some simple HTML.

Adding tabs

So for starters, switch into the HTML viewer when editing a page.

Here's how a basic tab looks like in code:

<div class="krown-tabs">

   <div class="titles">
      <h5>First tab</h5>
      <h5>Second tab</h5>
      <h5>Third tab</h5>
   </div>

   <div class="contents">
      <div class="tab">
	<p>Tab content here</p>
      </div>
      <div class="tab">
	<p>Tab content here</p>
      </div>
      <div class="tab">
	<p>Tab content here</p>
      </div>
   </div>

</div>

If you insert the code above and save your page, you should see a three tabs with some dummy text. Now here's the code breakdown:

<div class="krown-tabs">

This represents a tabs module. Each tabs module should start with this tag and inside it you will put your tabs content. Do not forget to close any  <div> that you open!

Next, you have the titles block:

<div class="titles">
   <h5>Title</h5>
</div>

Each title is wrapped inside a <h5> node.. In our example we have three such titles, one for each tab.

Next, you have the contents block:

 <div class="contents">
   <div> 	
     <p>Tab content here</p>       
   </div>
</div>

The parent container holds all of your tabs content, inside other divs.. You can put any HTML content inside your tabs..

That's all!

If something doesn't work right, it's most probably caused by some unclosed elements. Make sure that you go through the code and look for any unclosed divs then.

Adding toggles

Toggles (or accordion blocks) are added in the same way, via HTML code. The structure is slightly different though:

<div class="toggles">

   <div class="toggle">
      <h3 class="toggle__title">Title here</h3>
      <div class="toggle__content"><p>Content here.</p></div>
   </div>
   <div class="toggle">
      <h3 class="toggle__title">Title here</h3>
      <div class="toggle__content"><p>Content here.</p></div>
   </div>

</div>