Open In App

Semantic-UI Accordion Fluid Variation

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

Semantic UI is a UI framework based on CSS preprocessor less and jQuery. It is used to build beautiful and responsive web experiences using the elements and modules which come bundled with it.

An Accordion module is used to give users the ability to toggle the display of sections of content. At a specific time, only one section of content can be extended. 

In this article, we will see the Semantic UI Accordion Fluid Variation. A fluid accordion takes up the whole width of its parent container.

Semantic UI Accordion Fluid Variation Classes:

  • fluid: This class is used on the accordion module to take the full width of its container.

Syntax:

<div class="ui styled fluid accordion">
    ...
</div>

Example 1: The below example shows the use of fluid class on the accordion module to take the full width of a container.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI - Accordion Fluid Variation</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src="https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
 
    <style>
        .ui.container>.header {
            text-align: center;
        }
 
        h3 {
            margin-top: 0px;
        }
 
        .ui.ui.container>p {
            margin-top: 30px !important;
        }
    </style>
</head>
 
<body>
    <div class="ui container">
        <div class="header">
            <h1 class="ui green header">GeeksforGeeks</h1>
            <h3>Semantic-UI - Accordion Fluid Variation</h3>
        </div>
 
         
 
<p><b>Without <i>fluid</i> class:</b></p>
 
 
        <div class="ui accordion styled">
            <div class="active title">
                <i class="dropdown icon"></i>
                What is GeeksforGeeks?
            </div>
            <div class="active content">
                 
 
<p>
                    GeeksforGeeks is a computer science portal for
                    GeeksforGeeks where you can find articles on
                    various topics of computer science subjects.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Does GeeksforGeeks provide courses?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. GeeksforGeeks provide courses on may
                    subjects like DSA, Competitive Programming,
                    GATE CSE, etc.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Can I submit my articles on GeeksforGeeks?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. You can visit <a href=
                    "https://write.geeksforgeeks.org">
                    https://write.geeksforgeeks.org</a> to
                    submit your articles on geeksforgeeks.
                </p>
 
 
            </div>
        </div>
 
         
 
<p><b>With <i>fluid</i> class:</b></p>
 
 
        <div class="ui accordion styled fluid">
            <div class="active title">
                <i class="dropdown icon"></i>
                What is GeeksforGeeks?
            </div>
            <div class="active content">
                 
 
<p>
                    GeeksforGeeks is a computer science portal
                    for GeeksforGeeks where you can find articles
                    on various topics of computer science subjects.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Does GeeksforGeeks provide courses?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. GeeksforGeeks provide courses on may
                    subjects like DSA, Competitive Programming,
                    GATE CSE, etc.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Can I submit my articles on GeeksforGeeks?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. You can visit <a href=
                    "https://write.geeksforgeeks.org">
                    https://write.geeksforgeeks.org</a> to
                    submit your articles on geeksforgeeks.
                </p>
 
 
            </div>
        </div>
    </div>
 
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>
 






                        










Output:




Example 2: The below example shows the fluid accordion with a dark background, i.e inverted accordion. 




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html>


<html>


 


<head>


    <title>Semantic UI - Accordion Fluid Variation</title>


    <link rel="stylesheet" href=


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


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


    <script src=


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


    </script>


 


    <style>


        .ui.container>.header {


            text-align: center;


        }


 


        h3 {


            margin-top: 0px;


        }


    </style>


</head>


 


<body>


    <div class="ui container">


        <div class="header">


            <h1 class="ui header green">GeeksforGeeks</h1>


            <h3>Semantic UI - Accordion Fluid Variation</h3>


        </div>


 


        <div class="ui segment inverted">


            <div class="ui accordion fluid inverted">


                <div class="active title">


                    <i class="dropdown icon"></i>


                    What is GeeksforGeeks?


                </div>


                <div class="active content">


                     


 


<p>


                        GeeksforGeeks is a computer science


                        portal for GeeksforGeeks where you


                        can find articles on various


                        topics of computer science subjects.


                    </p>


 


 


                </div>


                <div class="title">


                    <i class="dropdown icon"></i>


                    Does GeeksforGeeks provide courses?


                </div>


                <div class="content">


                     


 


<p>


                        Yes. GeeksforGeeks provide courses


                        on may subjects like DSA,


                        Competitive Programming, GATE CSE, etc.


                    </p>


 


 


                </div>


                <div class="title">


                    <i class="dropdown icon"></i>


                    Can I submit my articles on GeeksforGeeks?


                </div>


                <div class="content">


                     


 


<p>


                        Yes. You can visit <a href=


                        "https://write.geeksforgeeks.org">


                        https://write.geeksforgeeks.org</a> to


                        submit your articles on geeksforgeeks.


                    </p>


 


 


                </div>


            </div>


        </div>


    </div>


    <script>


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


    </script>


</body>


 


</html>



















                        







                        










Output:




Reference: https://semantic-ui.com/modules/accordion.html#fluid


                                 


                                                             

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            

                            
                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Semantic-UI Accordion Variations
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Semantic-UI Search Fluid Variation
            

        
    
        
            

                Semantic-UI Step Fluid Variation
            

        
    
        
            

                Semantic-UI Dropdown Fluid Variation
            

        
    
        
            

                Semantic-UI Popup Fluid Variation
            

        
    
        
            

                Semantic-UI Input Fluid Variation
            

        
    
        
            

                Semantic-UI Menu Fluid Variation
            

        
    
        
            

                Semantic-UI Placeholder Fluid Variation
            

        
    
        
            

                Semantic-UI Accordion Inverted Variation
            

        
    
        
            

                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?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        vpsop                                

                            

                            

            
                                

                            

                                                                    

                                        
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