Multiple tabs only work in specific order

  • This seems like an odd one..

    I have vertical and horizontal tabs in separate divs on a page that will only work when the vertical tab div is placed second. When placed first, the vertical tabs will function properly but the horizontal tabs will break. The only plugin i have installed is WP UI and i’m using the Twenty Twelve theme so I wouldn’t think it’d be a jQuery version problem. Code pasted below if anyone has any help to offer. Thanks.

    <div class="verticalProdTable">
[wptabs style="wpui-blue" mode="vertical" name="topTabs"]
  [wptabtitle]Storage[/wptabtitle]
   [wptabcontent]test area1[/wptabcontent]
  [wptabtitle]Storage[/wptabtitle]
   [wptabcontent]test area2[/wptabcontent]
[/wptabs]
</div>

<div class="supportedProdTable">
<h2 class="tableHeader">Supported Products</h2>
[wptabs mode="horizontal" style="wpui-achu" name="bottomTabs"]
[wptabtitle]Storage[/wptabtitle]
[wptabcontent]
<p style="text-align:center;">Server blurb here and here and here and here and here too.</p>
<table border="1" bordercolor="#8a8c8e" style="background-color:#ffffff" width="100%; line-height: 16px;" cellpadding="1" cellspacing="1">
	<tr style="background-color:#0058c0; text-align:center;">
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">HP</td>
	</tr>
	<tr class="tablecontent">
		<td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>HP9000 Series<br/>K Series<br/>A Series<br/>NetServer<br/>RP5000 Series<br/>L Class<br/>B Class<br/>N Class<br/>RP 2000 Series<br/>ProLiant<br/><a class="orangeLink">Request a Quote ?</a></td>
	</tr>
	<tr style="background-color:#0058c0; text-align:center;">
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">DELL</td>
		<td class="columnHeader">What you get...</td>
	</tr>
	<tr class="tablecontent">
	        <td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>PowerEdge<br/>PowerVault<br/><a class="orangeLink">Request a Quote ?</a></td>
		<td>Maintenance story here and here and here and here and here and here and  here and here and here and here and here and here and here and here and hereand here and here and here and here and here and here and here<br/><a class="orangeLink">Request a Quote ?</a></td>
	</tr>
</table>
[/wptabcontent]

[wptabtitle]Servers[/wptabtitle]
[wptabcontent] This is the content of Tab2[/wptabcontent] 

[wptabtitle]Switches[/wptabtitle]
[wptabcontent] This is the content of Tab2[/wptabcontent]

[/wptabs]
</div>

    https://www.ads-software.com/extend/plugins/wp-ui/

Viewing 1 replies (of 1 total)
  • Thread Starter batvomit

    (@batvomit)

    i’ve built a test page and closed in on the problem. Any [wptabs] located AFTER a [wptabs mode=”vertical”] will break.

    Example:

    [wptabs]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent]
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs] 

[wptabs mode="vertical"]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent]
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs]  

[wptabs mode="vertical"]
  [wptabtitle] Tab 1[/wptabtitle]
    [wptabcontent] This is the content of Tab1.[/wptabcontent]
  [wptabtitle] Tab 2 [/wptabtitle]
    [wptabcontent] This is the content of Tab2[/wptabcontent]
[/wptabs]

    The top 2 tabs will work, but the one after the mode=vertical on will break…

Viewing 1 replies (of 1 total)
  • The topic ‘Multiple tabs only work in specific order’ is closed to new replies.