New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

dnnPanels jQuery Plugin

Return to previous page

  • 4/7/2015



dnnPanels jQuery Plugin

Last updated long time ago



(Enter the content of this article below)


This article is for a specific plugin. Please be sure to read the Introduction and Overview to jQuery Plugins which provides an introduction to the plugins.


This is used to provide expand/collapse behavior to regions on a form. This is not a jQuery UI plugin wrapper – it’s a new plugin created explicitly for DNN. It is highly recommended to use the DNN Form pattern in conjunction with this plugin.

If the proper html form pattern is followed, the plugin’s default options will work perfectly. However if you need to set up the html differently – you can override a number of options.

In addition, the plugin also has a built-in awareness of validation. Upon page load or post back, the plugin will walk through the panels and expand those that contain "tripped" validators.

Lastly, the panels state (opened or closed) will be persisted across postbacks by setting a short-term cookie in the clients browser.

Important note: for the cookie persistence functionality to work, you will need to specify an ID on the h2 (see below, i.e. dnnPanel-ExtensionPackageSettings). This ID is used to persist a cookie in the client browser so the panel's state will be remembered. Additionally, you should give it a very unique ID, so as not to create collisions with other settings cookies.

Please refer to the options below for usage.

Available Options and their Defaults

clickToToggleSelector: 'h2.dnnFormSectionHead a', // element that performs toggle action
sectionHeadSelector: '.dnnFormSectionHead', // "header" for each panel
regionToToggleSelector: 'fieldset', // "body" for each panel
toggleClass: 'dnnSectionExpanded', // Added to an expanded panel
clickToToggleIsolatedSelector: 'a', // The isolated element that performs toggle action
validationTriggerSelector: '.dnnPrimaryAction', // elements that trigger client side validation logic
invalidItemSelector: '.dnnFormError[style*="inline"]', // identifies an invalid item in a panel
validationGroup: '', // allows for the usage of a validation group
panelSeparatorSelector: '.ui-tabs-panel', // identifies the separator between each panel
cookieDays: 0, // cookie state persistence time in days
cookieMilleseconds: 120000 // cookie state persistence in minutes (defaults to two minutes)

Usage Example


<div id="dnnEditExtension">

<h2 class="dnnFormSectionHead" id="dnnPanel-ExtensionPackageSettings"><a href="" class="dnnLabelExpanded"><%=LocalizeString("PackageSettings")%></a></h2>
<div>Panel Content</div>

<h2 class="dnnFormSectionHead"><a href="#">Panel Title</a></h2>
<div>Panel Content</div>

<ul class="dnnActions dnnClear">
<li><asp:LinkButton id="cmdUpdate" runat="server" CssClass="dnnPrimaryAction" resourcekey="cmdUpdate" /></li>
<li><asp:LinkButton id="cmdDelete" runat="server" CssClass="dnnSecondaryAction" resourcekey="cmdDelete" Causesvalidation="False" /></li>




This plugin also has companion plugin - dnnExpandAll that handles expanding or collapsing all panels at once.

Other jQuery Plugins

  • dnnAlert - displays a notice in a modal dialog (uses jQuery UI)
  • dnnConfirm - displays an "are you sure?" confirmation in a modal dialog (uses jQuery UI)
  • dnnExpandAll - works with panels to expand or collapse all regions
  • dnnTabs - Displays content areas in a tabbed format (uses jQuery UI)
  • dnnTooltip - Provides help/info tooltip functionality
  • dnnPreview - Helps preview skins and containers in a new window
No sections defined
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out