How to make an accordion using jQuery easy UI ?
EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.
In this article, we will learn how to design accordion using jQuery EasyUI.accordion is display a collection of panels. It shows one or more than one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<div class="accordion"> </div>
Container Options:
- width: The width of accordion container.
- height: The height of accordion container.
- fit: Set to true to set the accordion container size fit it’s parent container.
- border: Defines if to show the border.
- animate: Defines if to show animation effect when expand or collapse panel.
- multiple: True to enable expanding multiple panels at one time.
- selected: The initialized selected panel index.
- halign: The header alignment of the accordion panel.
Panel Options:
- selected: Set to true to expand the panel.
- collapsible: Defines if to show collapsible button
Events:
- onSelect: Fires when a panel is selected.
- onUnselect: Fires when a panel is unselected.
- onAdd: Fires when a new panel is added.
- onBeforeRemove: Fires before a panel is removed.
- onRemove: Fires when a panel is removed.
Methods:
- options: Return the options of accordion.
- panels: Get all panels.
- resize: Resize the accordion.
- getSelected: Get the first selected panel.
- getSelections: Get the all the selected panels.
- getPanel: Get the specified panel.
- getPanelIndex: Get the specified panel index.
- select: Select the specified panel.
- unselect: Unselect the specified panel.
- add: Add a new panel.
- remove: Remove the specified panel
Approach:
- First, add jQuery Easy UI scripts needed for your project.
<script type=”text/javascript” src=”jquery.min.js”>
</script>
<!–jQuery libraries of EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”>
</script>
<!–jQuery library of EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>
Example:
HTML
<!doctype html> < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" initial-scale = 1 .0, maximum-scale = 1 .0, user-scalable = no "> <!-- EasyUI specific stylesheets--> < link rel = "stylesheet" type = "text/css" href = "themes/metro/easyui.css" > < link rel = "stylesheet" type = "text/css" href = "themes/mobile.css" > < link rel = "stylesheet" type = "text/css" href = "themes/icon.css" > <!--jQuery library --> < script type = "text/javascript" src = "jquery.min.js" > </ script > <!--jQuery libraries of EasyUI --> < script type = "text/javascript" src = "jquery.easyui.min.js" > </ script > <!--jQuery library of EasyUI Mobile --> < script type = "text/javascript" src = "jquery.easyui.mobile.js" > </ script > < h1 >w3wiki</ h1 > < h3 >how to make a basic accordion using jQuery UI?</ h3 > </ head > < body > < div id = "geek" class = "easyui-accordion" style = "width:300px;height:200px;" > < div title = "gfg1" > Beginner </ div > < div title = "gfg2" > for </ div > < div title = "gfg3" > Beginner </ div > </ div > </ body > </ html > |
Output:
Reference: http://www.jeasyui.com/documentation/