Code Document

Tabs

  • Horizontal Tabs Example:

    • Content segment #8. Link

    • Content segment #7.

    • Content segment #6.

    • Content segment #5.

    • Content segment #4.

  • Code:

    <div class="qinstance get-qsegments tabs-category-format categories">
    <div class="catid-16 term-category-2">
    <div id="category-2-1" class="vtabs vrow vcol-0">
    <div class="vl-12 vcol">
    <div class="vscr">
    <div class="vscr-x">
    <ul id="category-2-1-nav" class="vtab-nav vmenu vin-blocks vwhi-snw">
    <li class="vtab-title">
    <a href="#74-category-2-1">Segment 8</a>
    </li>
    <li class="vtab-title">
    <a href="#73-category-2-1">Segment 7</a>
    </li>
    <li class="vtab-title">
    <a href="#72-category-2-1">Segment 6</a>
    </li>
    <li class="vtab-title">
    <a href="#65-category-2-1">Segment 5</a>
    </li>
    <li class="vtab-title">
    <a href="#64-category-2-1">Segment 4</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="vl-12 vcol">
    <ul id="category-2-1-div" class="vtab-divs vove-h">
    <li id="74-category-2-1" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
    <p>Content segment #8.
    <a href="http://google.com" target="_blank">Link</a>
    </p>
    </li>
    <li id="73-category-2-1" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
    <p>Content segment #7.</p>
    </li>
    <li id="72-category-2-1" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
    <p>Content segment #6.</p>
    </li>
    <li id="65-category-2-1" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
    <p>Content segment #5.</p>
    </li>
    <li id="64-category-2-1" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
    <p>Content segment #4.</p>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
  • Vertical Tabs Example:

    • Content segment #8. Link

    • Content segment #7.

    • Content segment #6.

    • Content segment #5.

    • Content segment #4.

  • Code:

    <div class="qinstance get-qsegments vtabs-category-format categories">
    <div class="catid-16 term-category-2">
    <div id="category-2-3" class="vtabs vrow vcol-0">
    <div class="vl-4 vm-4 vcol">
    <div class="vscr">
    <div class="vscr-x">
    <ul id="category-2-3-nav" class="vtab-nav vmenu vs-in-blocks vwhi-snw">
    <li class="vtab-title">
    <a href="#74-category-2-3">Segment 8</a>
    </li>
    <li class="vtab-title">
    <a href="#73-category-2-3">Segment 7</a>
    </li>
    <li class="vtab-title">
    <a href="#72-category-2-3">Segment 6</a>
    </li>
    <li class="vtab-title">
    <a href="#65-category-2-3">Segment 5</a>
    </li>
    <li class="vtab-title">
    <a href="#64-category-2-3">Segment 4</a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <div class="vl-8 vm-8 vcol">
    <ul id="category-2-3-div" class="vtab-divs vove-h">
    <li id="74-category-2-3" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
    <p>Content segment #8.
    <a href="http://google.com" target="_blank">Link</a>
    </p>
    </li>
    <li id="73-category-2-3" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
    <p>Content segment #7.</p>
    </li>
    <li id="72-category-2-3" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
    <p>Content segment #6.</p>
    </li>
    <li id="65-category-2-3" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
    <p>Content segment #5.</p>
    </li>
    <li id="64-category-2-3" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
    <p>Content segment #4.</p>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>

Categories

©
    • Los Angeles

    • CA

    • United States

  • Website

  • Facebook

  • Tabs | Frontend UI Toolkit + Wordpress Framework

  • A wordpress framework used to structure simple Javascript and CSS prototypes. Hive is lite, only includes necessities and encourages custom styling.