Hello Dae Kim,
You can achieve this by slightly modifying the JavaScript of the example.
Here is something that should work for you:
var
panelDomElement = $get(
'<%=RadPanelBar1.ClientID %>'
);
var
timage = $get(
'<%= tbimage.ClientID %>'
);
if
(panelDomElement)
{
SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
}
var
panelDomElementRight = $get(
'<%=RadPanelBar2.ClientID %>'
);
var
timageRight = $get(
'<%= tbimageRight.ClientID %>'
);
if
(panelDomElementRight)
{
SetUpAnimation(timageRight.id, Telerik.Web.UI.jSlideDirection.Left, panelDomElementRight);
}
function
SetUpAnimation(image, direction,element)
{
element.style.position =
"relative"
;
var
slider = document.getElementById(image);
var
expanded =
false
;
var
expandAnimation =
new
Telerik.Web.UI.AnimationSettings({});
var
collapseAnimation =
new
Telerik.Web.UI.AnimationSettings({});
var
slide =
new
Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation,
false
);
slide.initialize();
slide.set_direction(direction);
$telerik.$(slider).click(
function
(event) {
element.parentNode.style.visibility=
"visible"
;
element.parentNode.style.display=
"block"
;
if
(!expanded) {
slide.expand();
}
else
{
slide.collapse();
}
expanded=!expanded;
var
collapseSlide=
function
() {
slide.collapse();
expanded=
false
;
$telerik.$(document).unbind(
'click'
,collapseSlide);
};
$telerik.$(document).bind(
'click'
,collapseSlide);
event.stopPropagation();
return
false
;
});
}
Hope this will help you!
Regards,
Nikolay Tsenkov
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items