Example:
Code:
<div class="qinstance get-qsegments slider-category-format categories">
<div id="category-2-1" class="vslider catid-16 term-category-2" style data-vsettings="tween:vmoveIaRa">
<ul id="category-2-1-div" class="vsli-divs vpos-r vgri vl-2 vm-2 vs-2 vove-h">
<li id="qsegments-74" class="vsli-div qsegments ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</li>
<li id="qsegments-73" class="vsli-div qsegments ">
<p>Content segment #7.</p>
</li>
<li id="qsegments-72" class="vsli-div qsegments ">
<p>Content segment #6.</p>
</li>
<li id="qsegments-65" class="vsli-div qsegments ">
<p>Content segment #5.</p>
</li>
<li id="qsegments-64" class="vsli-div qsegments ">
<p>Content segment #4.</p>
</li>
</ul>
<ul class="vsli-nav vrow cf" data-vcontrol="category-2-1">
<li class="vl-3 vm-3 vs-6 vcol vtex-al">
<p>
<a class="vsli-tag varr vl" href="#prev"></a>
</p>
</li>
<li class="vl-3 vm-3 vs-6 vcol vl-r6 vm-r6 vtex-ar">
<p>
<a class="vsli-tag varr vr" href="#next"></a>
</p>
</li>
<li class="vl-6 vm-6 vs-12 vcol vl-l3 vm-l3 vtex-ac">
<ul class="vsli-dots cf"></ul>
</li>
</ul>
</div>
</div>
Accordion Example:
Code:
<div class="qinstance get-qsegments accordion-category-format categories">
<div class="catid-16 term-category-2">
<ul id="category-2-3" class="vaccordion vacc-divs " style data-vsettings>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#74-category-2-3">Segment 8</a>
<div id="74-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #8.
<a href="http://google.com" target="_blank">Link</a>
</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#73-category-2-3">Segment 7</a>
<div id="73-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #7.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#72-category-2-3">Segment 6</a>
<div id="72-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #6.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#65-category-2-3">Segment 5</a>
<div id="65-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #5.</p>
</div>
</li>
<li class="vacc-nav vhas-dd vddb vove-h">
<a class="vacc-title" href="#64-category-2-3">Segment 4</a>
<div id="64-category-2-3" class="vacc-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #4.</p>
</div>
</li>
</ul>
</div>
</div>
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-5" class="vtabs vrow vcol-0">
<div class="vl-12 vcol">
<div class="vscr">
<div class="vscr-x">
<ul id="category-2-5-nav" class="vtab-nav vmenu vin-blocks vwhi-snw">
<li class="vtab-title">
<a href="#74-category-2-5">Segment 8</a>
</li>
<li class="vtab-title">
<a href="#73-category-2-5">Segment 7</a>
</li>
<li class="vtab-title">
<a href="#72-category-2-5">Segment 6</a>
</li>
<li class="vtab-title">
<a href="#65-category-2-5">Segment 5</a>
</li>
<li class="vtab-title">
<a href="#64-category-2-5">Segment 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vl-12 vcol">
<ul id="category-2-5-div" class="vtab-divs vove-h">
<li id="74-category-2-5" 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-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #7.</p>
</li>
<li id="72-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #6.</p>
</li>
<li id="65-category-2-5" class="vtab-div vani-d2 vani-d1- vani vfadeIa ">
<p>Content segment #5.</p>
</li>
<li id="64-category-2-5" 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-7" class="vtabs vrow vcol-0">
<div class="vl-4 vm-4 vcol">
<div class="vscr">
<div class="vscr-x">
<ul id="category-2-7-nav" class="vtab-nav vmenu vs-in-blocks vwhi-snw">
<li class="vtab-title">
<a href="#74-category-2-7">Segment 8</a>
</li>
<li class="vtab-title">
<a href="#73-category-2-7">Segment 7</a>
</li>
<li class="vtab-title">
<a href="#72-category-2-7">Segment 6</a>
</li>
<li class="vtab-title">
<a href="#65-category-2-7">Segment 5</a>
</li>
<li class="vtab-title">
<a href="#64-category-2-7">Segment 4</a>
</li>
</ul>
</div>
</div>
</div>
<div class="vl-8 vm-8 vcol">
<ul id="category-2-7-div" class="vtab-divs vove-h">
<li id="74-category-2-7" 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-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #7.</p>
</li>
<li id="72-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #6.</p>
</li>
<li id="65-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #5.</p>
</li>
<li id="64-category-2-7" class="vtab-div vani-d2 vani-d1- vani vmoveIaUa ">
<p>Content segment #4.</p>
</li>
</ul>
</div>
</div>
</div>
</div>
