How to link to another spry tab in include file.

[9thReg]

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

[David_Powers · Accepted solution]

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]

Thank you so much for your help.  That worked.