Thursday 12 September 2013

jQuery Tabs - multiple rows

<script>
$(function() {
$( "#tabs" ).tabs();
})

$(function() {
$( "#tabs2" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Title name 1</a></li>
<li><a href="#tabs-2">title name 2</a></li>
<li><a href="#tabs-3">title name 3</a></li>
</ul>
<div id="tabs-1">
<p> Your info 1 </p>
</div>
<div id="tabs-2">
<p> your info 2 </p>
</div>
<div id="tabs-3">
<p> your info 3 </p>
</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs-4">Title name 4</a></li>
<li><a href="#tabs-5">title name 5</a></li>
<li><a href="#tabs-6">title name 6</a></li>
</ul>
<div id="tabs-4">
<p> Your info 4 </p>
</div>
<div id="tabs-5">
<p> your info 5 </p>
</div>
<div id="tabs-6">
<p> your info 6 </p>
</div>

</div>



or




.tabSplit { clear: both; }

<div id="tabs">
      <ul>
            <li><a href="#tabs-1">Title name 1</a></li>
            <li><a href="#tabs-2">Title name 2</a></li>
            <li class="tabSplit"><a href="#tabs-3">Title name 3</a></li>
            <li><a href="#tabs-4">Title name 4</a></li>
      </ul>
      ...

No comments:

Post a Comment