Open In App

Semantic-UI | Accordion

Last Updated : 04 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
            rel="stylesheet" />
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


            rel="stylesheet" />


 


    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


            crossorigin="anonymous">


    </script>


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


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


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


            rel="stylesheet" />


 


    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="


            crossorigin="anonymous">


    </script>


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


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


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"


            rel="stylesheet" />


 


    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity=


"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 


            crossorigin="anonymous">


    </script>


 


    <script src=


"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">


    </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: 
 




 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Semantic-UI Statistics Variations
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Accordion Types
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to automatically close all collapsible elements inside of the accordion when closing the accordion?
            

        
    
        
            

                How to create Nested Accordion using Google AMP amp-accordion?
            

        
    
        
            

                How to create Auto-collapsing accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Animated accordion using Google AMP amp-accordion ?
            

        
    
        
            

                How to create Comparison accordion using Google AMP amp-accordion ?
            

        
    
        
            

                Angular PrimeNG Accordion Properties for Accordion
            

        
    
        
            

                Semantic-UI Accordion Styled Type
            

        
    
        
            

                ReactJS Semantic UI Accordion Module
            

        
    
        
            

                Semantic-UI Accordion Variations
            

        
    
        
            

                Semantic-UI Accordion Types
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
I

        

            
        

        

                                    


                                    

                                        iamsahil1910                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox