How to make an accordion using jQuery easy UI ?

Last Updated : 04 Mar, 2022

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>GeeksforGeeks</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">
            Geeks
    </div>
    <div title="gfg2">
        for
    </div>
    <div title="gfg3">
        Geeks
    </div>
</div>
 
</body>
</html>