Spry - Vertical Tabbed Panel

Question

Hey guys,
I looked around this site and I could find an answer to this but I couldn’t, so I thought I would pop this question in.
I want to make a vertical Tabbed Panel but I want it to be split into different categories.
The category heading is not clickable but its sub item are clickable, e.g.
Group A – Not clickable                     | Content Panel
Tab1 – Shows content panel 1            |
Tab2 – Shows content panel 2            |
Group B– Not clickable                      |
Tab3 – Shows content panel 3            |
Tab4 – Shows content panel 4            |
I tried a few ideas but with not luck.  If anyone could point me in the right direction I would be very grateful.

Answer 1

What I would do is make small change the JavaScript file
Find Spry.Widget.TabbedPanels.prototype.getTabs and replace it with this function.
Spry.Widget.TabbedPanels.prototype.getTabs = function()
     var tabs = [];
     var tg = this.getTabGroup();
     if (tg)
          tabs = this.getElementChildren(tg);
     for(var i = 0; i < tabs.length; i++){
          if(!tabs[i].className.match('TabbedPanelsTab')){
               tabs.splice(i, 1); // remove because its not a tab
     return tabs;
It checks if your tabbedpanels tab have the class "TabbedPanelsTab" if it does, it will allow it to be tab
So now you can do..
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="tab1" tabindex="0">I do nothing</li>
<li class="TabbedPanelsTab tab2" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab tab3" tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab tab4" tabindex="0">Tab 3</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Tab 1 Content</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
</div>
</div>