Tabs spread across different groupings
The widget I'm trying to build isn't playing nice with the Tab
function. The tabs are based on groupings and therefore aren't listed
together like a typical list of tabs shown in examples.
Some tab groups are larger than others (depending on our admin tool).
How do I get all the tabs to fragments to work with the Tab function?
here is my code to illustrate.
<div class="sliderGallery">
<ul class="list">
<li class="group">
<div class="groupContent">
Extra Info Here
<ul class="groupButtons">
<li class="singleButton"><a href="#fragment-1">Tab 1</
a></li>
<li class="singleButton"><a href="#fragment-2">Tab 2</
a></li>
<li class="singleButton"><a href="#fragment-3">Tab 3</
a></li>
</ul>
</div>
</li>
<li class="group">
<div class="groupContent">
Extra Info Here
<ul class="groupButtons">
<li class="singleButton"><a href="#fragment-4">Tab 4</
a></li>
<li class="singleButton"><a href="#fragment-5">Tab 5</
a></li>
<li class="singleButton"><a href="#fragment-6">Tab 6</
a></li>
</ul>
</div>
</li>
<li class="group">
<div class="groupContent">
Extra Info Here
<ul class="groupButtons">
<li class="singleButton"><a href="#fragment-7">Tab 7</
a></li>
<li class="singleButton"><a href="#fragment-8">Tab 8</
a></li>
<li class="singleButton"><a href="#fragment-9">Tab 9</
a></li>
<li class="singleButton"><a href="#fragment-10">Tab 10</
a></li>
<li class="singleButton"><a href="#fragment-11">Tab 11</
a></li>
</ul>
</div>
</li>
<li class="group">
<div class="groupContent">
Extra Info Here
<ul class="groupButtons">
<li class="singleButton"><a href="#fragment-12">Tab 12</
a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="fragmentGroup">
<div id="fragment-1"></div>
<div id="fragment-2"></div>
<div id="fragment-3"></div>
<div id="fragment-4"></div>
<div id="fragment-5"></div>
<div id="fragment-6"></div>
<div id="fragment-7"></div>
<div id="fragment-8"></div>
<div id="fragment-9"></div>
<div id="fragment-10"></div>
<div id="fragment-11"></div>
<div id="fragment-12"></div>
</div>