Open In App

jQueryUI Accordion icons Option

Improve
Improve
Like Article
Like
Save
Share
Report

The icons option is used to set the icons for the header and when the header is active. If set to false, there will be no header for the header.

By default, its value is 

{ 
    "header": "ui-icon-triangle-1-e", 
    "activeHeader": "ui-icon-triangle-1-s" 
}

Value:

  • Icon name: The icon which we want to display in the header.

Approach: First, add the jQuery Mobile scripts needed for your project.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script> 
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script> 
<link href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />

Example 1:

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src=
    </script>
    <script src=
    </script>
    <link href=
          rel="stylesheet" type="text/css" />
 
    <script>
        $(function () {
            $( "#gfg" ).accordion(
                   { icons: { "header": "ui-icon-alert", "activeHeader": "ui-icon-minus" } }
 
                );
        });
    </script>
    <style>
         #gfg{font-size: 17px;}
    </style>
</head>
  
<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <b>jQueryUI | icons Accordion</b>
    <br>
    <br>
    <div id="gfg">
        <h2>A</h2>
         <div>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>
        </div>
        <h2>B</h2>
        <div>Geeks2
            <br>Geeks2
            <br>Geeks2
            <br>Geeks2
        </div>
    </div>
</body>
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <script src=
    </script>
    <script src=
    </script>
    <link href=
          rel="stylesheet" type="text/css" />
 
    <script>
        $(function () {
            $( "#gfg" ).accordion(
                   { icons: false }
         
                );
        });
    </script>
    <style>
        #gfg{font-size: 17px;}
    </style>
</head>
 
<body>
    <h1 style="color:green">
          GeeksforGeeks
      </h1>
    <b>jQueryUI | icons Accordion</b>
    <br>
    <br>
    <div id="gfg">
        <h2>A</h2>
        <div>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>Geeks1
            <br>
        </div>
        <h2>B</h2>
        <div>Geeks2
            <br>Geeks2
            <br>Geeks2
            <br>Geeks2
        </div>
    </div>
</body>
</html>


Output:



Last Updated : 04 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads