Search jQuery

jQuery Forum

Using jQuery UI

augustwind

Tabs - multiple rows

in Using jQuery UI • 10 years ago

Using the existing Default Tabs source code, is there any way to do the following? :

create multiple rows of tabs
assign only a certain number of tabs per row

Replies(3)

Nuker_Vip..

Re: Tabs - multiple rows

10 years ago

yes and maybe not sure yet.

create multiple rows of tabs:

just change the #tabs label for each to a different one.

$(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>

augustwind

Re: Tabs - multiple rows

10 years ago

All that did is create a whole new section for the tabs below the working area of the first row...

I guess I didn't make myself clear enough.

I need the change only the rows of tabs themselves. The working area will stay the same for all of them. I just want certain tabs to be in row 1 and certain other tabs to be in row 2

Row 1: Tab1 Tab2 Tab3 Tab4
Row 2: Tab5 Tab6 Tab7 Tab8

Working area for all tabs