Skip to content
Related Articles

Related Articles

Semantic-UI | Accordion

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Mar, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.
The accordion is the interactive user interface that allows us to toggle the display of sections like hiding and showing.
jQuery Code: 
 

$('.ui.accordion').accordion();

Example 1: This example using Semantic-UI to create an accordion.
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Accordion</title>
 
    <link href=
            rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui accordion">
            <div class="active title">
                <i class="dropdown icon"></i>
                What is Geeksforgeeks?
            </div>
            <div class="active content">
                <p>
                    Geeksforgeeks is a platform where
                    you can find solution to any king
                    of computer science related problem
                </p>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                What is Internshala?
            </div>
            <div class="content">
                <p>
                    It's an online platform which
                    provide opportunity for student
                    to get internship.
                </p>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                What is Semantic-ui:
            </div>
            <div class="content">
                <p>
                    It's a really cool framework
                    by which you can do cool stuff
                </p>
            </div>
        </div>
    </div>
     
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>


Output: 
 

But the output of the above example looks so simple. To make it look really cool like all this in a square box, You just add a styled class like ‘UI styled accordion’.
Example 2: This example using Semantic-UI to create a stylish accordion.
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Accordion</title>
 
    <link href=
            rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui accordion">
            <div class="active title">
                <i class="dropdown icon"></i>
                What is Geeksforgeeks?
            </div>
            <div class="active content">
                <p>
                    Geeksforgeeks is a platform where
                    you can find solution to any king
                    of computer science related problem
                </p>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                What is Internshala?
            </div>
            <div class="content">
                <p>
                    It's an online platform which
                    provide opportunity for student
                    to get internship.
                </p>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                What is Semantic-ui:
            </div>
            <div class="content">
                <p>
                    It's a really cool framework
                    by which you can do cool stuff
                </p>
            </div>
        </div>
    </div>
     
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>


Output: 
 

Example 3: This example using Semantic-UI to create a nested accordion.
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Nested Accordion</title>
 
    <link href=
            rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui styled accordion">
            <div class="active title">
                <i class="dropdown icon"></i>
                Geeksforgeeks Articles
            </div>
            <div class="active content">
                Data Structure
                <div class="accordion">
                    <div class="active title">
                        <i class="dropdown icon"></i>
                        Link-List
                    </div>
                    <div class="active content">
                        <p>Types of Link-List</p>
                        <div class="accordion">
                            <div class="title">
                                <i class="dropdown icon"></i>
                                Singly Link-List
                            </div>
                            <div class="content">
                                It contain data part and next pointer.
                            </div>
                            <div class="title">
                                <i class="dropdown icon"></i>
                                Doubly Link-List
                            </div>
                            <div class="content">
                                It contain data part, next and prev pointer.
                            </div>
                        </div>
                    </div>
                    <div class="title">
                        <i class="dropdown icon"></i>
                        Tree
                    </div>
                    <div class="content">
                        Binary Tree
                    </div>
                </div>
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Geekforgeeks Courses
            </div>
            <div class="content">
                <p>Courses</p>
                <div class="accordion">
                    <div class="active title">
                        <i class="dropdown icon"></i>
                        Web Technologies
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>


Output: 
 

Example 4: This example using Semantic-UI to create an accordion menu. Here we will use checkbox and radio button.
jQuery Code: 
 

$('.ui.accordion').accordion();
$('.ui.radio.checkbox').checkbox();
$('.ui.checkbox').checkbox();

Complete code: 
 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Accordion Menu</title>
 
    <link href=
            rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body>
    <div style="margin-top: 20px" class="ui container">
        <div class="ui vertical accordion menu">
            <div class="item">
                <a class="active title">
                    <i class="dropdown icon"></i>
                    Choose Test
                </a>
                <div class="active content">
                    <div class="ui form">
                        <div class="grouped fields">
                            <div class="field">
                                <div class="ui radio checkbox">
                                    <input type="radio"
                                        name="test" value="ds">
                                    <label>Data Structure</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui radio checkbox">
                                    <input type="radio"
                                        name="test" value="web">
                                    <label>Web Technology</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui radio checkbox">
                                    <input type="radio" name="test"
                                        value="programming">
                                    <label>Programming</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <a class="title">
                    <i class="dropdown icon"></i>
                    Level (Atleast 1)
                </a>
                <div class="content">
                    <div class="ui form">
                        <div class="grouped fields">
                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox"
                                        name="easy">
                                    <label>Easy</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox"
                                        name="intermediate">
                                    <label>Intermediate</label>
                                </div>
                            </div>
                            <div class="field">
                                <div class="ui checkbox">
                                    <input type="checkbox"
                                        name="diff">
                                    <label>Difficult</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $('.ui.accordion').accordion();
        $('.ui.radio.checkbox').checkbox();
        $('.ui.checkbox').checkbox();
    </script>
</body>
 
</html>


Output: 
 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!