.NET Answers

ASP.NET, HTML, CSS, Visual Studio, CSharp, VB.NET and other programming items of interest.

DotNetNuke Skinning - Collapsible Containers

July 10, 2008 By: Dave

One feature you’ll see in DotNetNuke containers is the ability to collapse the container using an icon, typically in the upper right hand corner of the container. Implementing collapsible containers in DotNetNuke is relatively simple.

The control that causes a panel to expand or collapse is the Visibility control. To make this available to your skin, add the following code at the top of the ASCX file:

<%@ Register TagPrefix="dnn"
   TagName="VISIBILITY"
   Src="~/Admin/Containers/Visibility.ascx" %>

Then add the following markup where you want the icon to display:

<dnn:VISIBILITY runat="server" id="dnnVISIBILITY" />

You would typically add this to the right hand side of the container’s title area.

It’s really just that simple. This gives you the default +/- icon and automatically handles the expand/collapse feature of the container.

You can also modify the following attributes:

Attribute	Descriptions
AnimationFrames	The number of frames to use when animating the opening and closing of the container. The default number is 5. A larger number will slow down the animation.
BorderWidth	Typically zero (0), this value controls the width of the border around the expand or collapse image.
MinIcon	You can replace the icon representing the minimized state by specifying it in this attribute.
MaxIcon	You can replace the icon representing the maximized state by specifying it in this attribute.