How to make Basic accordion using jQuery Mobile ?

Last Updated : 03 Apr, 2023

In this article, we will be making a basic accordion using jQuery Mobile.

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= 
"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" /> 

    <script> 
        $(function () { 
            $( "#gfg" ).accordion();
        }); 
    </script> 
    <style>
         #gfg{font-size: 17px;}
    </style>
</head> 
 
<body> 
    <h1 style="color:green">
          GeeksforGeeks
      </h1> 
    <b>jQueryUI | Accordion</b> 
    <br>
    <br>
    <div id="gfg">
        <h3>A</h3>
        <div>A</div>
        <h3>B</h3>
        <div>B</div>
        <h3>C</h3>
        <div>C</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= 
"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" /> 

    <script> 
        $(function () { 
            $( "#gfg" ).accordion();
        }); 
    </script> 
    <style>
         #gfg{font-size: 17px;}
    </style>
</head> 
 
<body> 
    <h1 style="color:green">
          GeeksforGeeks
      </h1> 
    <b>jQueryUI | Accordion</b> 
    <br>
    <br>
    <div id="gfg">
        <h3>GFG</h3>
        <div>GeeksforGeeks</div>
        <h3>Geeks</h3>
        <div>GeeksforGeeks</div>
    </div> 
</body> 
</html>

Output:

How to make Info icon using jQuery Mobile ?

taran910

Improve

Article Tags :

How to make Basic accordion using jQuery Mobile ?

Similar Reads

Thank You!

What kind of Experience do you want to share?