Semantic-UI Accordion Fluid Variation

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">w3wiki</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 w3wiki?
            </div>
            <div class="active content">
                 
 
<p>
                    w3wiki is a computer science portal for
                    w3wiki where you can find articles on 
                    various topics of computer science subjects.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Does w3wiki provide courses?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. w3wiki 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 w3wiki?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. You can visit <a href=
                    "https://write.w3wiki.net">
                    https://write.w3wiki.net</a> to
                    submit your articles on w3wiki.
                </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 w3wiki?
            </div>
            <div class="active content">
                 
 
<p>
                    w3wiki is a computer science portal 
                    for w3wiki where you can find articles 
                    on various topics of computer science subjects.
                </p>
 
 
            </div>
            <div class="title">
                <i class="dropdown icon"></i>
                Does w3wiki provide courses?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. w3wiki 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 w3wiki?
            </div>
            <div class="content">
                 
 
<p>
                    Yes. You can visit <a href=
                    "https://write.w3wiki.net">
                    https://write.w3wiki.net</a> to
                    submit your articles on w3wiki.
                </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">w3wiki</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 w3wiki?
                </div>
                <div class="active content">
                     
 
<p>
                        w3wiki is a computer science
                        portal for w3wiki where you
                        can find articles on various
                        topics of computer science subjects.
                    </p>
 
 
                </div>
                <div class="title">
                    <i class="dropdown icon"></i>
                    Does w3wiki provide courses?
                </div>
                <div class="content">
                     
 
<p>
                        Yes. w3wiki 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 w3wiki?
                </div>
                <div class="content">
                     
 
<p>
                        Yes. You can visit <a href=
                        "https://write.w3wiki.net">
                        https://write.w3wiki.net</a> to
                        submit your articles on w3wiki.
                    </p>
 
 
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>

Output:

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

HTML

HTML

Contact Us