Open In App

Semantic-UI Accordion Types

Last Updated : 08 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </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:

Semantic-UI Standard Accordion Type.

Example 2: This example illustrates the Semantic-UI Styled Accordion Type.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Accordion Types</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous">
    </script>
    <script src=
    </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>


Output:

Semantic-UI Styled Accordion Type

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads