Tabbed Panels: Opening panel with panel number doesn't work with Spry Data

Question

I have some data inside a TabbedPanelsContent div, and would
like to be able to open tabs using links, but it only seems to work
with static content.
Clicking on tabs themselves loads content correctly, whereas
clicking on links does nothing. I tried both - panel number and
panel ID - neither worked. What gives?
See code below.
<div spry:region="ds1">
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Asset
Management</li>
<li class="TabbedPanelsTab"
tabindex="0">Brokerage</li>
<li class="TabbedPanelsTab" tabindex="0">Mutual
Funds</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry01}'.search(/^Asset Management/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry02}'.search(/^Brokerage/) !=
-1;">{ds1::client}</p>
</div>
<div class="TabbedPanelsContent">
<p spry:repeat="ds1"
spry:test="'{@industry03}'.search(/^Mutual Funds/) !=
-1;">{ds1::client}</p>
</div>
</div>
</div>
<script type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>
<a href="#" onclick="tp1.showPanel(0); return
false;">Asset Management</a>
<a href="#" onclick="tp1.showPanel(1); return
false;">Brokerage</a>
<a href="#" onclick="tp1.showPanel(2); return
false;">Mutual Funds</a>

Answer 1

Try to declare the variable out side of the region
<script> var tp1;</script>
<div spry region ... >
tab panel stuff
<script type="text/javascript">
tp1 = new Spry.Widget.TabbedPanels("tp1");
</script>
</div>