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:

AnimationFramesThe 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.
BorderWidthTypically zero (0), this value controls the width of the border around the expand or collapse image.
MinIconYou can replace the icon representing the minimized state by specifying it in this attribute.
MaxIconYou can replace the icon representing the maximized state by specifying it in this attribute.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • DotNetNuke – SkinningDotNetNuke – Skinning Today I'm going to start a separate series on Skinning DotNetNuke. Don't worry, I'm still planning to continue the series on creating modules. Later on, I may start a series on something […]
  • DotNetNuke Skins – Skin ObjectsDotNetNuke Skins – Skin Objects There are a number of DotNetNuke controls, which they call objects, that are available to the skin designer. This adds functionality to the page such as a link to login/logout, date/time, […]
  • DotNetNuke Skinning – SolPartMenuDotNetNuke Skinning – SolPartMenu When you first encounter the SolPartMenu skin object, you may become a bit overwhelmed by all of the options.  But, it doesn't take long to realize that you can ignore most of the […]
  • DotNetNuke Skinning – ContainersDotNetNuke Skinning – Containers Today we move our focus to DotNetNuke containers. Not because we are done with skins, but because we can't go any further in our discussion of skinning until we cover containers.As […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.