-
Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog2.0
- RTL version
-
Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- Dimple library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Data tables
- Data tables extensions
- Handsontable
- Responsive tables
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
Accordion component
jQuery UI accordion widget with options
Click headers to expand/collapse content that is broken into logical sections, much like tabs. The underlying HTML markup is a series of headers (span
tags) and content divs so the content is usable without JavaScript.
To fill the vertical space allocated by its container, set the heightStyle
option to "fill"
, and the script will automatically set the dimensions of the accordion to the height of its parent container.
Control animation easing and duration using animate
option. Accepts true
or false
values; number- duration in milliseconds; string- name of easing; object- containing easing
and duration
properties.
By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible
option to true
in widget configuration. Click on the currently open section to collapse its content pane.
By default, accordion uses click
event to collapse/expand content. It can be changed using event
option, that is responsible for activating the associated card. Multiple events can be specified, separated by a space.
Accordion widget supports sortablefunctionality for panels re-ordering. To use, specify dragging handle
and vertical axis
in sortable accordion configuration and add accordion refresh
when sorting is stopped.
Menu component
jQuery UI menu widget with optionsBasic configuration
Basic menu with default functionality
Multiple levels
Example of multi level sub menus
Default header
Basic header styling of label sections
- Header first
- Action
- Another action
- Header second
- Something else here
- Another line
Disabled items
Using .ui-state-disabled
class
Left menu item icons
Dropdown icons in left
position
Highlighted header
Highlight header using .highlight
class
- Header first
- Action
- Another action
- Header second
- Something else here
- Another line
Disabled menu
Disable menu using disabled
option
Element positions
Components and their positions
Menu header icons
Display left/right positioned icons
- Header first
- Action
- Another action
- Header second
- Something else here
- Another line