jqWidgets

jqxExpander – Expander widget built with jQuery


jqxExpander is a simple and easy to use widget that shows/hides an element. It supports several built-in expand modes. You can set it up to show or hide an element after a click, double-click or mouse enter event on the expander’s headerBrowse examples: Expander Demos

Features

  • Toggle Modes
  • Works across devices and browsers
  • Web Standards Compliant
  • Rich and easy to use JavaScript API
  • Easy customization and built-in themes
  • Search-Engine Friendly Rendering

Toggle Modes

You can specify the action needed for expanding or collapsing the Expander. jqxExpander supports the following toggle modes:
  • ‘click’ – a navigation item’s content section is expanded or collapsed when the user clicks the item’s header section.
  • ‘double click’ – a navigation item’s content section is expanded or collapsed when the user double clicks the item’s header section.
  • ‘mouse enter/mouse leave’ – a navigation item’s content section is expanded or collapsed when the mouse cursor is moved over the item’s header section.

Works across devices and browsers

jqxExpander supports all major desktop and mobile web browsers – Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad). jqxExpander automatically detects the browser’s type and adjusts its internal behavior for optimal rendering and best user experience. You can easily use this widget even on touch devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript Expander widget based on jQuery, HTML5 and CSS3.

Rich and easy to use JavaScript API

jqxExpander has a rich set of events and built-in functions guaranteeing full control over the Expander. With the Expander API, you can easily expand or collapse the content or dynamically change the header or content sections.

Easy customization and built-in themes

jqxExpander ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property.

Search-Engine friendly rendering

jQuery Expander uses a pair of DIV tags for rendering. The first DIV tag represents the Expander’s Header and the second DIV tag is the Expander’s Content section. Below is a html markup for building a jQuery Expander.
<div id='jqxExpander'>
<div>
Early History of the Internet</div>
<div>
<ul>
<li>1961 First packet-switching papers</li>
<li>1966 Merit Network founded</li>
<li>1966 ARPANET planning starts</li>
<li>1969 ARPANET carries its first packets</li>
<li>1970 Mark I network at NPL (UK)</li>
<li>1970 Network Information Center (NIC)</li>
<li>1971 Merit Network's packet-switched network operational</li>
<li>1971 Tymnet packet-switched network</li>
<li>1972 Internet Assigned Numbers Authority (IANA) established</li>
<li>1973 CYCLADES network demonstrated</li>
<li>1974 Telenet packet-switched network</li>
<li>1976 X.25 protocol approved</li>
<li>1979 Internet Activities Board (IAB)</li>
<li>1980 USENET news using UUCP</li>
<li>1980 Ethernet standard introduced</li>
<li>1981 BITNET established</li>
</ul>
</div>
</div>
jQWidgets © 2011-2014. All Rights Reserved.
All product and company names herein are trademarks of their respective owners.