Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make an accordian using jQuery easy UI ?

  • Last Updated : 07 Apr, 2021

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:


<div class="accordion">

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


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


  • 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


  • First, add jQuery Easy UI scripts needed for your project.

<script type=”text/javascript” src=”jquery.min.js”> 


<!–jQuery libraries of EasyUI –>

<script type=”text/javascript” src=”jquery.easyui.min.js”>  


<!–jQuery library of EasyUI Mobile –>

<script type=”text/javascript”  src=””>  </script> 



<!doctype html> 
    <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"
    <link rel="stylesheet" type="text/css"
    <link rel="stylesheet" type="text/css"
    <!--jQuery library -->
    <script type="text/javascript" src="jquery.min.js"
    <!--jQuery libraries of EasyUI -->
    <script type="text/javascript"
    <!--jQuery library of EasyUI Mobile -->
    <script type="text/javascript"
    <h3>how to make a basic accordian using jQuery UI?</h3>
<div id="geek" 
    <div title="gfg1">
    <div title="gfg2">
    <div title="gfg3">





My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!