Accordion - Expand Direction

Expand Direction

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Settings

Select Expand Direction(Client-side):
Select Expand Direction(Server-side):

Description

This sample shows how to change the direction of the expanding content area from the client side and server side.

For client side, the expandDirection option is used to switch the direction in which an accordion pane expands:

<script type="text/javascript" language="javascript">
	function setExpandDirection(direction) {
		// clear fixed padding values that was assigned 
		// during vertical animation.
		// Note, this is not needed when you use the server 
		// side ExpandDirection property.
		$("#<%=C1Accordion1.ClientID%> > .ui-accordion-content")
				.css("paddingTop", "")
				.css("paddingBottom", "");
		// Change the expandDirection option.
		$("#<%=C1Accordion1.ClientID%>")
					.c1accordion("option", "expandDirection", direction);
	}
</script>