tabbed content issue...help!

[shopgirltx]

I'm trying to format my listing page with tabbed content and I'm stuck. My trouble is I need my tabs to display only if there is content in them. What is happening with my current code is the tabs are only displaying if there is content for that section, but the content for those empty sections is bumping over into the visible tabs making the information off by one or two tabs (depending on the page). Anybody know how to fix this?? Please take a look at this page so you can see what I mean. Thanks!

https://waynedaltonparts.3dcartstore...iver_p_79.html

<div id="TabbedPanels1" class="TabbedPanels">
                      <ul class="TabbedPanelsTabGroup">
                        <li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_Header-description]</li>
                        
                       <!--START: extra_field_6--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_extrafield6]</li><!--END: extra_field_6-->
                       <!--START: extra_field_7--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_extrafield7]</li><!--END: extra_field_7-->
                        <!--START: extra_field_8--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_extrafield8]</li><!--END: extra_field_8-->
                        <!--START: extra_field_9--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_extrafield9]</li><!--END: extra_field_9-->
                        <!--START: extra_field_10--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_extrafield10]</li><!--END: extra_field_10-->
                        <!--START: reviews--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[reviews_header]</li><!--END: reviews-->
                       
                      </ul>
                      <div class="TabbedPanelsContentGroup">
                         <div class="TabbedPanelsContent">[extended_description]</div>
                        
                        <!--START: extra_field_6--><div class="TabbedPanelsContent">[extra_field_6]</div><!--END: extra_field_6-->
                         <!--START: extra_field_7--><div class="TabbedPanelsContent">[extra_field_7]</div><!--END: extra_field_7-->
                         <!--START: extra_field_8--><div class="TabbedPanelsContent">[extra_field_8]</div><!--END: extra_field_8-->
                        <!--START: extra_field_9--><div class="TabbedPanelsContent">[extra_field_9]</div><!--END: extra_field_9-->
                        <!--START: extra_field_10--><div class="TabbedPanelsContent">[extra_field_10]</div><!--END: extra_field_10-->
                        
                       <!--START: reviews--><div class="TabbedPanelsContent">
        <table width="100%" cellpadding="1" cellspacing="1" border="0">
          <tr>
            <td colspan="4"><table width="100%" cellpadding="2" cellspacing="0" class="titles">
                <tr>
                  <td class="titles">&nbsp;[reviews_header]</td>
                  <td align="right" class="titles"><span class="item"><strong>[reviews_total] [totalrating]</strong>&nbsp;&nbsp;[review_link]</span></td>
                </tr>
              </table></td>
          </tr>
          <!--START: user_reviews-->
          <tr>
            <td><table width="100%" cellpadding="4" cellspacing="0">
                <tr>
                  <td align="left" width="80" class="checkout-headers"><img src="assets/templates/common/images/star[rating].gif" alt=""></td>
                  <td class="checkout-headers"><strong>[short_review]</strong></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="item">[long_review]</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="item">Reviewed by: &nbsp;<strong>[user_name]</strong> from [user_city].
                    <!--START: user_email-->
                    <a href="mailto:[user_email]">[user_email]</a>
                    <!--END: user_email-->
                    on [review_date]</td>
                </tr>
              </table></td>
          </tr>
          
          <!--END: user_reviews-->
        </table>
        
        </div><!--END: reviews-->
                        
                        
                      </div>
                    </div>
					<script type="text/javascript">
                  var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 0 });
                    </script>

[stevekem]

I think the problem is you cannot call non-identical code blocks (Start/End) more than once on the same page. What we did was use Extra Fields 1-5 as the tab (names) and used Extra Fields 6-10 as the tab (content).

So after the description tab, the second tab would use Extra Fields 1 (name) and 6 (content), the third tab would use Extra Fields 2 (name) and 7 (content), and so on.....

Try using the code below in place of what you posted here and see if it works the way you would like. Remember to backup your file first.

<div id="TabbedPanels1" class="TabbedPanels">
 <ul class="TabbedPanelsTabGroup">
  <li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[product_Header-description]</li>
  <!--START: extra_field_1--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[extra_field_1]</li><!--END: extra_field_1-->
  <!--START: extra_field_2--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[extra_field_2]</li><!--END: extra_field_2-->
  <!--START: extra_field_3--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[extra_field_3]</li><!--END: extra_field_3-->
  <!--START: extra_field_4--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[extra_field_4]</li><!--END: extra_field_4-->
  <!--START: extra_field_5--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[extra_field_5]</li><!--END: extra_field_5-->
  <!--START: reviews--><li class="TabbedPanelsTab" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">[reviews_header]</li><!--END: reviews-->
 </ul>
 <div class="TabbedPanelsContentGroup">
  <div class="TabbedPanelsContent">[extended_description]</div>
  <!--START: extra_field_6--><div class="TabbedPanelsContent">[extra_field_6]</div><!--END: extra_field_6-->
  <!--START: extra_field_7--><div class="TabbedPanelsContent">[extra_field_7]</div><!--END: extra_field_7-->
  <!--START: extra_field_8--><div class="TabbedPanelsContent">[extra_field_8]</div><!--END: extra_field_8-->
  <!--START: extra_field_9--><div class="TabbedPanelsContent">[extra_field_9]</div><!--END: extra_field_9-->
  <!--START: extra_field_10--><div class="TabbedPanelsContent">[extra_field_10]</div><!--END: extra_field_10-->
  <div class="TabbedPanelsContent">
   <!--START: user_reviews-->
   <table width="100%" cellpadding="1" cellspacing="1" border="0">
    <tr>
     <td colspan="4">
      <table width="100%" cellpadding="2" cellspacing="0" class="titles">
       <tr>
        <td class="titles">&nbsp;[reviews_header]</td>
        <td align="right" class="titles"><span class="item"><strong>[reviews_total] [totalrating]</strong>&nbsp;&nbsp;[review_link]</span></td>
       </tr>
      </table>
     </td>
    </tr>
    <tr>
     <td>
      <table width="100%" cellpadding="4" cellspacing="0">
       <tr>
        <td align="left" width="80" class="checkout-headers"><img src="assets/templates/common/images/star[rating].gif" alt=""></td>
        <td class="checkout-headers"><strong>[short_review]</strong></td>
       </tr>
       <tr>
        <td>&nbsp;</td>
        <td class="item">[long_review]</td>
       </tr>
       <tr>
        <td>&nbsp;</td>
        <td class="item">Reviewed by: &nbsp;<strong>[user_name]</strong> from [user_city]. <!--START: user_email--> <a href="mailto:[user_email]">[user_email]</a> <!--END: user_email--> on [review_date]</td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
   <!--END: user_reviews-->
  </div>
 </div>
</div>

<script type="text/javascript"> var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 0 }); </script>

[stevekem]

Also, say you only wanted 2 tabs displaying (description and another one), be sure that only Extra Fields 1 and 6 have data in them.

If you had data in Extra Field 2, but nothing in Extra Field 7 then a third tab will display (Extra Field 2) without any content (Extra Field 7) and it messes everything up then.

[Go Live]

I'm not sure a search engine can see these tabs. (as java comes into play)
Then I've seen some and you can't tell which tab is displaying.
Then I ask myself "Why would you hide content"

Now I am all for looking new and fresh.

I have gone for the Tab look with a table border and 1 tab on top. description inside with bulleted features. My sells experience tells me that features is what sells as you never know what feature will hit home for each viewer.

I often get caught up with pride that I can do it. But then go back to basics for reality check.

Just my .02

[shopgirltx]

Thanks for the info...I don't think this will work for me. I already am using extra fields 1-5 for another purpose. I think I will just let all the tabs display, even if they are empty. My goal is to have all that info filled in anyways, so this should be some motivation to get that done.

[tclifesafety]

I wish I had some advice but my javascript coding leaves a lot to be desired. I had 3dCart's design team do my product page, and it functions exactly as you described.

For example, on this page, only the product description and downloads tab have content, so only those 2 tabs show:
http://www.totalcomputing.net/Fire-L...tor_p_268.html

On this page, there are reviews as well, so the reviews tab shows as well:
http://www.totalcomputing.net/Power-...ery_p_846.html

If you can't get the functionality you want using the Spry framework, I would definitely recommend the 3d design team.

[watchdr]

I'm not sure a search engine can see these tabs. (as java comes into play)
Then I've seen some and you can't tell which tab is displaying.
Then I ask myself "Why would you hide content"

Now I am all for looking new and fresh.

I have gone for the Tab look with a table border and 1 tab on top. description inside with bulleted features. My sells experience tells me that features is what sells as you never know what feature will hit home for each viewer.

I often get caught up with pride that I can do it. But then go back to basics for reality check.

Just my .02

Hi Go Live,

Actually the information does show in the html code. Both on the 3dcart tab template which I use and on shopgirltx website.

Since it is in the html code search engines would see it. Isn't that right? Or am I missing something?