Skip to content
Related Articles

Related Articles

Save Article
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:

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 accordian 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>

 

Output:

 

Reference: http://www.jeasyui.com/documentation/




My Personal Notes arrow_drop_up
Recommended Articles
Page :