tabssprytabbed

How do I change the content but not the tab with Spry Tabbed Panels?


I have a site that consists mainly of Spry Tabbed Panels.

Right now I have it working where you click on a different tab and the content changes with the change of tab. But now I have links inside of the content of my tabs that I would like to link to a different page but in the same tab. How do I do this?

Here is an example of what I'm talking about on the Wells Fargo site:

First Tab: https://www.wellsfargo.com/investing/retirement/ira/

Clicked Link In Tab (but the tab doesn't change): https://www.wellsfargo.com/help/faqs/investing/ira

And if you would like to show me an answer in the context of my site, here is my site:

http://emilymagnuson.com


Solution

  • My understanding is that you want to create pages inside a tabbed panel. The solution can be: creating another Spry Tabbed Panel inside the Spry Tabbed Panel.

    EDITED with sample Links: Here's the source code:

    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Main Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Main Tab 2</li>
        <li class="TabbedPanelsTab" tabindex="0">Main Tab 3</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Main Content 1</div>
        <div class="TabbedPanelsContent">Main Content 2
          <div id="TabbedPanels2" class="VTabbedPanels">
            <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab" tabindex="0">Sub Tab 1</li>
              <li class="TabbedPanelsTab" tabindex="0">Sub Tab 2</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">Sub Content 1
                  <li><a href="#">Link here</a></li>
                  <li><a href="#">Link here</a></li>
                  <li><a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Go to Menu 2</a></li>
                 </div>
              <div class="TabbedPanelsContent">Sub Content 2</div>
            </div>
          </div>
        </div>
        <div class="TabbedPanelsContent">Main Content 3</div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    </script>
    </body>
    

    And in your CSS, add this:

    .VTabbedPanels .TabbedPanelsTabGroup {
        display: none;
    }
    

    Now, the tab inside the tabbed panel is hidden. Only the content is shown.

    Also, add this to widen the width of your panel content's content:

    .VTabbedPanels .TabbedPanelsContentGroup {
        width: 99%;
        height: 100%;
        border: 0;
    }
    

    NOTES:

    For:

    <a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Go to Menu 2</a>
    

    showPanel(0) - 1st tab; showPanel(1) - 2nd tab, and so forth.