dnnExpandAll jQuery Plugin

Return to previous page

  • 4/7/2015
  • 1991 Views

Comments

1991 Views

dnnExpandAll jQuery Plugin

Last updated 6 years ago

Comments

Common

(Enter the content of this article below)

Advanced

 
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.

dnnExpandAll

This plugin is used in conjunction with the dnnPanels plugin. If you have a group of three or more panels – an "expand all" element should be added that when clicks expands all of the currently visible panels. It then switches it’s action state to "collapse all" so that the user may trigger the reverse action.

Available Options and their Defaults

expandText: 'Expand All', // text for expand action
collapseText: 'Collapse All', // text for collapsed action
targetArea: '#dnnHostSettings', // the wrapper around the target panels
targetSelector: 'h2.dnnFormSectionHead a', // the element which triggers the expand/collapse action
targetExpandedSelector: '.dnnSectionExpanded' // the class which identifies the target panel in an expanded state

Usage Example

The HTML element would be added in an appropriate place - typically outside of the associated panels.

HTML:

<div class="dnnFormExpandContent"><a href="#"><%=Localization.GetString("ExpandAll", Localization.SharedResourceFile)%></a></div>

JavaScript:

$('#dnnAdvancedSettings .dnnFormExpandContent a').dnnExpandAll({
expandText: '<%=Localization.GetString("ExpandAll", Localization.SharedResourceFile)%>',
collapseText: '<%=Localization.GetString("CollapseAll", Localization.SharedResourceFile)%>',
targetArea: '#dnnAdvancedSettings'
});

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)
  • dnnPanels - displays content areas in regions that are expandable and collapsible
  • 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
Contents
No sections defined

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out