Semantic-UI Accordion Types

Last Updated : 08 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.

In this article, we will learn about the different kinds of accordions available in Semantic UI. Having a different type of accordion is good for any developer. The accordion type is used to specify the type of accordion used for the particular condition. There are 2 types of accordion in Semantics UI that are described below.

Accordion Type:

Accordion: This is a standard accordion with a basic collapse feature to render the content, without any decoration or style.
Style Accordion: This is a styled accordion containing the different pre-defined classes that can be utilized to decorate the accordion. A styled accordion adds basic formatting.

Syntax:

<div class="ui accordion"> Content </div>

We will understand the implementation of the Semantic-UI Accordion Types through the examples.

Example 1: This example illustrates the Semantic-UI Standard Accordion Type.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI Accordion Types</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 Types
        </h3>
        <h4>Accordion:</h4>
        <div class="ui 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: This example illustrates the Semantic-UI Styled Accordion Type.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic UI Accordion Types</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 Types
        </h3>
        <h4>Style Accordion:</h4>
        <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>