Skip to main content
9thReg
9thReg
Known Participant
October 31, 2009
Answered

How to link to another spry tab in include file.

  • October 31, 2009
  • 1 reply
  • 1157 views

Hello all,

I am new to using spry tabed pannels, acordians, etc.  I was wonding if something is possible.  Can you link to another spry tabed panel from another one where both are include files?

The following is a example of what I'm asking:

<!-- this is main.inc.php which is an include file in index.php -->

<div id="TabbedPanels1" class="TabbedPanels">
   <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">tab 2</li>
        <li class="TabbedPanelsTab" tabindex="0">tab 3</li>
        <li class="TabbedPanelsTab" tabindex="0">tab 4</li>
        <li class="TabbedPanelsTab" tabindex="0">tab 5</li>
  </ul>
   <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent"><?php include(content_page_1.inc.php'); ?></div>
        <div class="TabbedPanelsContent">Content 2</div>
        <div class="TabbedPanelsContent"><?php include('content_page_2.inc.php'); ?></div>
        <div class="TabbedPanelsContent">Content 4</div>
        <div class="TabbedPanelsContent"><?php include(content_page_3.inc.php'); ?></div>
    </div>
  </div>

So, if main.inc.php is included into index.php with content_page_1 and content_page_2 set up identically to main.inc.php ...  Can you have text in tab 4 of content_page_1 take you to tab 2 in content_page_2?

If this is possible, does anyone know of a tutorial where I can learn how to do this?

Thanks

This topic has been closed for replies.
Correct answer David_Powers

Your description is a bit difficult to follow, but it sounds as though you have tabbed panels nested inside each other.

The fact that you are using include files makes no difference whatsoever. Include files are assembled on the server to create a single web page. Therefore, the important thing is that your tabbed panels should have unique IDs. So, if you're nesting tabbed panels inside TabbedPanels1, the other panels should be TabbedPanels2, TabbedPanels3, etc. Also each set of tabbed panels will need to be initialized by the Spry constructor at the bottom of the parent page.

The best way to set this up is to create a single page that does what you want, and then to carve it up into the include files.

To open a different tab, you use the showPanel() method. So, to create a link to open the third tab in TabbedPanels1, you create a link like this:

<a href="javascript:;" onclick="TabbedPanels1.showPanel(2)">Open panel 3</a>

The panels are counted from 0, so 2 represents the third tab.

I haven't tested this, but in theory, the following should open a specific tab in a nested set of tabbed panels:

<a href="javascript:;" onclick="TabbedPanels2.showPanel(2);TabbedPanels3.showPanel(3)">Open panel 4 inside the second tab</a>

1 reply

David_Powers
David_PowersCorrect answer
Inspiring
October 31, 2009

Your description is a bit difficult to follow, but it sounds as though you have tabbed panels nested inside each other.

The fact that you are using include files makes no difference whatsoever. Include files are assembled on the server to create a single web page. Therefore, the important thing is that your tabbed panels should have unique IDs. So, if you're nesting tabbed panels inside TabbedPanels1, the other panels should be TabbedPanels2, TabbedPanels3, etc. Also each set of tabbed panels will need to be initialized by the Spry constructor at the bottom of the parent page.

The best way to set this up is to create a single page that does what you want, and then to carve it up into the include files.

To open a different tab, you use the showPanel() method. So, to create a link to open the third tab in TabbedPanels1, you create a link like this:

<a href="javascript:;" onclick="TabbedPanels1.showPanel(2)">Open panel 3</a>

The panels are counted from 0, so 2 represents the third tab.

I haven't tested this, but in theory, the following should open a specific tab in a nested set of tabbed panels:

<a href="javascript:;" onclick="TabbedPanels2.showPanel(2);TabbedPanels3.showPanel(3)">Open panel 4 inside the second tab</a>
9thReg
9thRegAuthor
Known Participant
November 1, 2009

Thank you so much for your help.  That worked.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices