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

Question

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

chest_nut · Accepted Answer · 2013-02-21T04:42:47.300

1

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.

edited Feb 21 '13 at 04:42

answered Feb 18 '13 at 15:54

chest_nut

195
1
2
11

thanks for the reply, but thats far from what I'm looking for. I want the top tabs to stay the same but the content in the tab to change, when a link inside the content of the tab is clicked. Click a link on the wellsfargo link that I attached above. It does what I want to learn to do. Thank you! – Emily Magnuson Feb 18 '13 at 21:46
hi Emily. Yes, I've seen the link. You mean, if I click a **link** inside the content of the tabbed panel, another page will show within the same tab? If yes, I have edited my answer. – chest_nut Feb 19 '13 at 00:48
Thank you, but still not what I'm going for. What you gave me had the spry tabbed panels and then inside the tab there was a verticle tab list. I don't want anything inside the tab content other than the link and then when you click on the link, new content with out the top tab changing. Thank you! – Emily Magnuson Feb 19 '13 at 15:41
I'm having a hard time figuring out what part of the code you changed, and on the 3rd tab you put a link and when you click the link the content changes, I don't know where to put the 2nd content. The Tumblr code is confusing to me because I have to weed through the Tumblr stuff. Could you maybe edit the top code? That would help a lot! Thank you! – Emily Magnuson Feb 20 '13 at 18:03
Hi Emily. Yes, I've edited the code. Check on it and lemme know if you need more clarification. :) – chest_nut Feb 21 '13 at 00:22
I tried out the above code you gave me and it didn't work. There were 3 tabbed panels, the second tab had a list and a link, I attached a page to the link to see if it worked. And when I would click the link it just went to the page, the tabs disappeared. I probably did something wrong. But I did put those two code changes in the Tabbed Panels CSS file. – Emily Magnuson Feb 21 '13 at 01:34
@chest_net see above comment =) – Emily Magnuson Feb 21 '13 at 01:35
Hi Emily. Can you give me a link so I can see for myself what's going on? Thanks. :-) – chest_nut Feb 21 '13 at 03:55
Or, if it's okay, give me the source code so I can try and look what the problem is. Or, did you place the code of the page inside the tabbed panel content? I'm sorry but I can't figure out what the problem is without seeing the code. – chest_nut Feb 21 '13 at 04:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/24867/discussion-between-chest-nut-and-emily-magnuson) – chest_nut Feb 21 '13 at 04:43
I commented on the chat you opened up – Emily Magnuson Feb 21 '13 at 14:42

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

1 Answers1