Hi. How can we help?

Tabs

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.

To avoid creating a distraction, when starting a new design project, we always go back to one of the old mainstays: lorem ipsum or li Europan lingues.

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

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