Articles With Additional Tabs Function in Median UI

Aman Chourasia
Articles With Additional Tabs Function
Source: jagodesain.com

This optional feature is used to split the article into two, in this example the article is divided into two languages. It should be noted that this post is not an auto translate but you create two articles in different languages ​​that are united in one post.

How tabs work in posts

This tab is the same as the tabs feature in usual, we make use of CSS Pseudo :: checked and the <input> tag in HTML as the basis, which means that this feature is very light because it does not use javascript at all. Another good thing is that you can use this feature on the AMP version.

You don't have to always be bilingual articles, you can also divide your articles into two parts using this feature if your articles are too long.

Correct tutorial and application

To use this template it is highly recommended that you write in 'HTML View' mode because tabs may not work if you write not in HTML mode.

In the bundle file, a ready-to-use template is provided, you only need to copy it and add your article to the marked section, the example code is as below:

  <div class='post-tabsContent'>
    <div class='tabsContent-1'>

      <!-- Fill in the first article here -- >
      
    </div>
    <div class='tabsContent-2'>

      <!-- Fill in the second article here -->
      
    </div>
  </div>

This optional feature is used to split the article into two, in this example the article is divided into two languages. It should be noted that this post is not an auto translate, but you create two articles in different languages that are united in one post.

This tab is the same as the tabs feature in usual, we make use of CSS Pseudo ::checked and the <input> tag in HTML as the base which means this feature is very light because it does not use javascript at all. Another good thing is that you can use this feature on the AMP version.

It doesn't have to be articles in two languages, you can also divide your articles into two parts using this feature in case your articles are too long.

To use this template it is highly recommended that you write in 'HTML View' mode because tabs may not work if you write not in HTML mode.

In the file bundle has provided a ready-made template, you only need to copy it and add your article on the parts that have been on the mark, sample code as below:

  <div class='post-tabsContent'>
    <div class='tabsContent-1'>

      <!-- Isi artikel pertama disini -- >
      
    </div>
    <div class='tabsContent-2'>

      <!-- Isi artikel kedua disini -->
      
    </div>
  </div>
data:post.author.name