Hi. How can we help?


14 Mar 2018 in: Shortcodes

Basic Tabs

Tabs are connecting using paths specified in the data-tab attribute. Tab is then initialized in Javascript on the activating elements.

In addition to the well-known paragraph-length placeholder texts Lorem Ipsum, and Li Europan Lingues, there are several other filler texts.

The twelve most common letters in the English language are another popular choice when a designer just needs a meaningless phrase to test our typography and layout.

<ul class="wojo tabs">
  <li class="active"><a data-tab="#popular">Popular </a></li>
  <li><a data-tab="#archive">Active </a></li>
  <li><a data-tab="#comments">Comments </a></li>
<div class="wojo basic tab item segment active" id="popular">
  <p>To avoid creating a distraction... </p>
<div class="wojo basic tab item segment" id="archive">
  <p>In addition to the well-known... </p>
<div class="wojo basic tab item segment" id="comments">
  <p>The twelve most common letters... </p>

No javaScript is needed. Just create html structure as in above, and you're ready to go.

css file location in /themes/master/css/utility.css