DotNetNuke Skinning – Collapsible Containers

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"
   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.

Related Post

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail