Skip to content
Related Articles

Related Articles

Semantic-UI Accordion Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 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.

Semantic UI Accordion variations are used to create accordions with different variations. Semantic UI accordion offers the following variations.

Semantic-UI Accordion Variation class:

  • fluid: This class is used to create an accordion that can take up the width of its container.
  • inverted: This class is used to format to appear on dark backgrounds.

Syntax:

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

Example 1: The following code demonstrates the Semantic UI fluid accordion variation.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>Semantic UI</title>
        <link href=
        rel="stylesheet" />
        <style>
            button {
                width: 170px;
            }
            .accordion {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <center>
            <h1 style="color:green">GeeksforGeeks</h1>
            <strong>Semantic UI Variations Accordion</strong>
        </center>
        <br><br>
        <strong>Accordion Variations:</strong>
        <div class="ui styled fluid accordion">
          <div class="active title">
            <i class="dropdown icon"></i>
            GeeksforGeeks
          </div>
          <div class="active content">
             
<p>
             GeeksforGeeks is a computer science portal.
             It is the best platform to lean programming.
            </p>
 
 
          </div>
          <div class="title">
            <i class="dropdown icon"></i>
            Semantic UI
          </div>
          <div class="content">
             
<p>
             Semantic UI is a modern framework used in
             developing seamless designs for the website,
             It gives the user a lightweight experience
             with its components. It uses the predefined
             CSS and jQuery to incorporate in different
             frameworks.
            </p>
 
 
          </div>
          <div class="title">
            <i class="dropdown icon"></i>
            HTML
          </div>
          <div class="content">
             
<p>
              HTML stands for HyperText Markup Language.
              It is used to design web pages using markup
              language.
            </p>
 
 
          </div>
        </div>
    </body>
</html>


Output:

Semantic-UI Accordion Variations

Semantic-UI Accordion Variations

Example 2: The following code demonstrates the Semantic UI inverted accordion variation.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Semantic UI</title>
    <link href=
    rel="stylesheet" />
    <style>
        body
        {
          margin-left:10px;
          margin-right:10px;
        }
        button {
            width: 170px;
        }
        .accordion {
            width: 600px;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
   <center>
       <h1>Geeksforgeeks</h1>
       <strong>Semantic UI Inverted accordion variation</strong>
   </center>
   <br><br>
     <strong>Inverted Accordion Variant:</strong>
   <div class="ui inverted segment">
     <div class="ui inverted accordion">
       <div class="active title">
         <i class="dropdown icon"></i>
         GeeksforGeeks
       </div>
       <div class="active content">
          
<p>
             GeeksforGeeks is a computer science portal.
             It is the best platform to lean programming.
         </p>
 
 
       </div>
       <div class="title">
         <i class="dropdown icon"></i>
         Semantic UI
       </div>
       <div class="content">
          
<p>...</p>
 
       </div>
       <div class="title">
         <i class="dropdown icon"></i>
         HTML
       </div>
       <div class="content">
          
<p>...</p>
 
       </div>
   </div>
   </div>
</body>
</html>


Output:

Semantic-UI Accordion Variations

Semantic-UI Accordion Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!