Introduction

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

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.