Excentrics World

Basic Collapsable Panel

Title Text	Collapse
The control can contain anything that a regular panel control can contain.

Demo Code from Above
`<ew:CollapsablePanel id="cpDemo1" TitleText="Title Text" TitleStyle-CssClass="demoTitle" CssClass="demoContent" runat="server"> The control can contain anything that a regular panel control can contain. <asp:TextBox ID="tbDemo1" runat="server" /> <asp:Button ID="btnDemo1" Text="Postback" runat="server" /> </ew:CollapsablePanel>`

Nested Sliding Collapsable Panels with Images

Nested Sliding - 1

This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.
This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.

Nested Sliding - 2

Collapse

This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.
This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.
This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.
This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.

Demo Code from Above


         <ew:CollapsablePanel id="cpDemo2_1" TitleText="Nested Sliding - 1" AllowSliding="true" TitleStyle-CssClass="demoTitle" CssClass="demoContent" AllowTitleExpandCollapse="true" ExpandImageUrl="~/images/expand.gif" CollapseImageUrl="~/images/collapse.gif" runat="server">

            This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

            This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

            <ew:CollapsablePanel id="cpDemo2_2" TitleText="Nested Sliding - 2" AllowSliding="true" TitleStyle-CssClass="demoTitle" CssClass="demoContent" AllowTitleRowExpandCollapse="true" runat="server">

               This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

               This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

               This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

               This is just a bunch of filler content to show that the panel works well when nested and has sliding enabled.<br />

            </ew:CollapsablePanel>

         </ew:CollapsablePanel>

Grouped Collapsable Panels

Folders

+ Inbox
+ Sent Items
+ Deleted Items
+ Outbox

Calendar

+ Today
+ This Week
+ This Month
+ This Year

Contacts

+ Me
+ You
+ Him
+ Her

Demo Code from Above


         <ew:CollapsablePanel runat="server" id="cpDemo1Folders" AllowSliding="True" ShowLinkOrImage="False" TitleText="Folders" AllowTitleRowExpandCollapse="True" AllowTitleExpandCollapse="False" TitleStyleContainerMode="TitleOnly" TitleStyle-CssClass="demoTitle" CollapsedTitleStyle-CssClass="demoTitleCollapsed" CssClass="demoContent" GroupName="Demo1">

			   <table border="0" cellpadding="0" cellspacing="0" width="100%" class="apInner">

			      <tr>

			         <td>

			            + <a href="#">Inbox</a><br>

			            + <a href="#">Sent Items</a><br>

			            + <a href="#">Deleted Items</a><br>

			            + <a href="#">Outbox</a>

			         </td>

			      </tr>

			   </table>

		   </ew:CollapsablePanel>

		   <ew:CollapsablePanel runat="server" id="cpDemo1Calendar" AllowSliding="True" ShowLinkOrImage="False" TitleText="Calendar" AllowTitleRowExpandCollapse="True" AllowTitleExpandCollapse="False" TitleStyleContainerMode="TitleOnly" TitleStyle-CssClass="demoTitle" CollapsedTitleStyle-CssClass="demoTitleCollapsed" CssClass="demoContent" Collapsed="True" GroupName="Demo1">

			   <table border="0" cellpadding="0" cellspacing="0" width="100%" class="apInner">

			      <tr>

			         <td>

			            + <a href="#">Today</a><br>

			            + <a href="#">This Week</a><br>

			            + <a href="#">This Month</a><br>

			            + <a href="#">This Year</a>

			         </td>

			      </tr>

			   </table>

		   </ew:CollapsablePanel>

		   <ew:CollapsablePanel runat="server" id="cpDemo1Contac" AllowSliding="True" ShowLinkOrImage="False" TitleText="Contacts" AllowTitleRowExpandCollapse="True" AllowTitleExpandCollapse="False" TitleStyleContainerMode="TitleOnly" TitleStyle-CssClass="demoTitle" CollapsedTitleStyle-CssClass="demoTitleCollapsed" CssClass="demoContent" Collapsed="True" GroupName="Demo1">

			   <table border="0" cellpadding="0" cellspacing="0" width="100%" class="apInner">

			      <tr>

			         <td>

			            + <a href="#">Me</a><br>

			            + <a href="#">You</a><br>

			            + <a href="#">Him</a><br>

			            + <a href="#">Her</a>

			         </td>

			      </tr>

			   </table>

		   </ew:CollapsablePanel>

.net resources

for an excentric world

quicklinks

quickblog