Seperating Spry Tabs and Panel.

Question

I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
I posted the same message here: http://forums.adobe.com/message/2694106
But because no one awnsers to it, and i believe it IS possible to alter the Spry code so it works in a seperate way im posting this as a new topic.
I have a site already and hate to change everything just because i like to use Spry tabbed panels.
I now have this set up with div floats.
HEADER
MENU  CONTENT
FOOTER
I already have this working code in the Menu div. The buttons work and the code is ready for Spry if i get the seperate content working.
<div id="WNavigation">
         <div id="TabbedPanels1" class="VTabbedPanels">
            <ul class="TabbedPanelsTabGroup">
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Home">
          <a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
          <table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Info">
          <a href="/Info.html" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
          <table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Gallerij">
          <a href="/gallerij.html" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
          <li class="TabbedPanelsTab" tabindex="0">
          <style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
          <table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Contact">
          <a href="/Contact.html" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
        </ul>
        </div>
     </div>
I put animated buttons on it. And if i ever get the seperate Content div working i need to change the links to open the panel instead of a normal URL.
What i want to do next is put the TabbedPanelsContent into the Content div instead of the Menu div.
But everything i tried didnt work out right.
The TabbedPanelsTabGroup is now completly in the Menu div and i wish someone can post alternate code that i can put in the Content div.
So i am not using this code right now: (my page works without it for now)
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Please let someone make the content and tabs seperate!!!

Answer 1

WRobN1 wrote:
I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
In a previous post I did say that you cannot separate the tabs from the panel. By that I really meant that you must keep the structure, including ID's and CLASSes as follows for the widget to work in its standard format.
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
</div>
If you want to use the DIV <div id="TabbedPanels1" class="TabbedPanels"> as your mainContent area, UL <ul class="TabbedPanelsTabGroup"><div class="TabbedPanelsContentGroup"> as your menu and DIV  as your content area, then that is OK.
Using style rules you can style the tabs as you wish as well as the content area. You can move the content area down from the tabs using the following style rule
.TabbedPanelsContentGroup {
   margin-top: 150px;
As said, it does not matter how you style the widget, the structure must stay intact.
WRobN1 wrote:
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr><td style="padding-right:0px" title ="Home"><a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td></tr></table></li>
When you do use the mark-up as above, please remember that by definition  the <STYLE>-tag must be within the <HEAD>-area and try to use DIV's, SPAN's etc instead of using tables.
I hope the above helps.
Ben