Try this and adapt to your needs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="SpryAssets/SpryDOMUtils.js"></script>
<script type="text/javascript" src="SpryAssets/SprySlidingPanels.js"></script>
<link href="SpryAssets/SprySlidingPanels.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style>
.SlidingPanels {
position: relative;
width: 200px;
height: 200px;
padding: 0px;
}
.SlidingPanelsContentGroup {
position: relative;
height:600px;
margin: 0px;
padding: 0px;
}
.SlidingPanelsContent {
width: 100%;
height: 400px;
overflow: hidden;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<a href="#" id="trigger1">Click me to go to Tab 1 and Panel 3</a>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0" id="trigger2">Click mo to go to Tab1 and Panel 1</li>
<li class="TabbedPanelsTab" tabindex="0">Onglet 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Contenu 1
<a href="#" onClick="sp1.showPanel(0);">Panel 1</a>
<a href="#" onClick="sp1.showPanel(1);">Panel 2</a>
<a href="#" onClick="sp1.showPanel(2);">Panel 3</a>
<div id="slidingPanel_1" class="SlidingPanels">
<div class="SlidingPanelsContentGroup">
<div id="content1" class="SlidingPanelsContent">The Content 1</div>
<div id="content2" class="SlidingPanelsContent">The Content 2</div>
<div id="content3" class="SlidingPanelsContent">The Content 3</div>
</div>
</div>
</div>
<div class="TabbedPanelsContent">Contenu 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
Spry.Utils.addLoadListener(function() {
Spry.$$("#trigger1").addEventListener('click', function() {
TabbedPanels1.showPanel(0);
sp1.showPanel(2);
}, false);
Spry.$$("#trigger2").addEventListener('click', function() {
//TabbedPanels1.showPanel(0);
sp1.showPanel(0);
}, false);
}
);
</script>
</body>
</html>
You may even do better using Spry.$$() CSS3-like selector (:first-child, nth-of-type(n), etc) to avoid adding ids on elements.
Xav
