Hi,
It's very easy to do so with a little bit extra coding (which I am providing below).
There are generally two ways to do this. To show/hide the panel on the server side or to show/hide the panel on the client side. In order to show/hide the panel on the server side, you would usually use a CallbackPanel control (It's not a must, without CallbackPanel you can still show/hide panels, but the whole page will be refreshed, instead only the panel part is refreshed). You can find a sample that demonstrates this technic here:
http://www.essentialobjects.com/demo/Default.aspx?path=TabStrip\_i1\_i3The server side code in this sample uses a callback to dynamically load page contents but you can change it to set your panel's Visible to true/false.
Another way is to show/hide them on the client side. In order to do that you will need to handle the TabStrip's ClientSideOnItemClick event, inside that event handler you will then use Javascript to show/hide a panel. The following code assumes that you have 5 panels and their IDs are "Panel1", "Panel2"...."Panel5" respectively.
Code: JavaScript
function TabStripOnClick(e, info)
{
var index = info.getItem().getIndex();
for (var i = 0; i < 5; i++)
{
var panel = document.getElementById("Panel" + (i + 1).toString());
if (i == index)
panel.style.display = "block";
else
panel.style.display = "none";
}
}
When you use it this way, make sure all Panel's Visible is true (the default value), but the style.display property of those who are not initially visible is set to "none":
Code: HTML/ASPX
<asp:Label ID="Panel1" runat="server"></asp:Panel>
<asp:Label ID="Panel2" runat="server" style="display:none"></asp:Panel>
<asp:Label ID="Panel3" runat="server" style="display:none"></asp:Panel>
...
Thanks