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.

dnnPanels

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

HTML:

<div id="dnnEditExtension">

  

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

  <fieldset>

    <div>Panel Content</div>

  </fieldset>

  

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

  <fieldset>

    <div>Panel Content</div>

  </fieldset>

  

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

  </ul>

  

</div>

JavaScript:

$('#dnnEditExtension').dnnPanels();

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