Tabs Feature on Post Pages

This feature is an improvement of the tabs feature in the Median UI template, if in Median UI we use pure CSS which limits only a maximum of 2 tabs in one post, in this fix we use open source javascript that we get from codepen.

The advantage of using JS is that the writing is easier and there is no limit on the maximum tabs created, you can add 3 tabs or even more in one post depending on your needs.

You can use this feature to divide 2 posts, for example Indonesian and English, or to share articles that are too long. The only drawback of using javascript is that this feature does not work on the AMP version of the template because in AMP javascript is not allowed

The correct way of implementing

To use this feature you have to create posts in HTML view mode, fortunately on blogger updates you can still add images and so on without switching to compose mode.

In the Fletro bundle, a ready-to-use post template is provided, you only need to write your article in the marked section. By default we add 3 tabs in the template, you can add or subtract them as you wish. Example template code like this.

<div class="tabs-content">  <div id='tab-1' class="b-tab active">      </div>  <div id='tab-2' class="b-tab">      </div>  <div id='tab-3' class="b-tab">      </div></div>

Continue to tab 2

Another advantage of this feature is that you can choose to display which tab you want at the beginning. You only need to add the active classname on the tab you want to display first. like the example below we want to display the 2nd tab at the beginning so the code is as follows:

<div class="tabs-head">    <span data-tab='tab-2' class="tabs-nav span>  </div><div class="tabs-content">    <div id='tab-2' class="b-tab <!-- Isi artikel tab kedua disini -- >  </div>  </div>

Added new tab

It’s easy to add a new tab, you just need to be sure and change the id of the tag, for example as below:

<div class="tabs-head">      <span data-tab='tab-4' class="tabs-nav">Tab 4</span></div><div class="tabs-content">      <div id='tab-4' class="b-tab">      </div></div>

Verify the value on the attribute data-tab = ‘…’ and id = ‘…’ the tab-content is the same so that the tabs function properly, in the example above we use data-tab = ‘tab-4’ you can change it as you wish.