Content tabs

In version 1.2.0 we added a "tabs shortcode" into the theme. It can be achieved by writing some simple HTML, just the way we tackle columns or icons in Kingdom.

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.

This can be used in any page you desire. If you are looking to insert tabs inside product pages, you might want to first increase the content area, because tabs take quite a bit of space. Read our article on this tweak here: http://shopify-support.krownthemes.com/article/44-increase-the-products-content-area