Semantic-UI Accordion Styled Type

Last Updated : 28 Feb, 2022

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 predefined CSS and jQuery to incorporate into different frameworks.

The accordion type is used to specify the type of accordion used for the particular condition. The Semantic-UI Accordion Styled Type is used to add basic formatting to the accordion element.

Semantic-UI Accordion Styled Type Used Class:

styled: It is used to add basic formatting to the accordion element.

Syntax:

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

Example 1: In this example, we will describe the Semantic-UI Accordion Styled Type.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Accordion Styled Type</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 class="ui text container"> 
        <h1 class="ui green header center aligned"> 
            GeeksforGeeks 
        </h1> 
        <h3 class="ui header center aligned"> 
            Semantic-UI Accordion Styled Type 
        </h3> 
          
        <div class="ui styled 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> 
    </div> 
    <script> 
        $('.ui.accordion').accordion(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the Semantic-UI Accordion Styled Type with inverted variations.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Accordion Styled Type</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 class="ui text container"> 
        <h1 class="ui green header center aligned"> 
            GeeksforGeeks 
        </h1> 
        <h3 class="ui header center aligned"> 
            Semantic-UI Accordion Styled Type 
        </h3> 
  
        <div class="ui inverted styled 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 learn 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> 
        </div> 
    </div> 
    <script> 
        $('.ui.accordion').accordion(); 
    </script> 
</body> 
  
</html>