Semantic-UI Accordion Inverted Variation

Last Updated : 04 Mar, 2022

Semantic UI is an open-source framework that offers a variety of components to make your UI more meaningful. One of them is “Accordion”.

Semantic UI has an Accordion component to display different sections of content. Users can also display the accordions on a dark background. Let us see this variation of an accordion.

Semantic UI Accordion Inverted Variation: If you want to display accordion on black background you can make use of an inverted accordion. A single or group of sections showing relatable content can be displayed in dark background. We will create a UI to show the accordion inverted variation.

Semantic-UI Accordion Inverted Variation Class:

inverted: This class is used to make the accordion inverted(color-wise).

Syntax:

<div class="ui inverted segment">
   <div class="ui inverted accordion">
      <div class="title">......</div>
      <div class="content">.....</div>
      ....
   </div>
</div>

To toggle the hiding and showing of sections, we use the following syntax:

<script>
    $('.ui.accordion').accordion();
</script>

Example 1: These examples demonstrate accordion inverted variation by using inverted class.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <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"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <br /><br />
    <div class="ui container">
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
             
<p>Semantic UI Accordion Inverted Variation</p>
 
        </b>
        <hr><br />
 
        <div class="ui inverted segment">
            <div class="ui inverted accordion">
                 
<p>Geeks for Geeks Self-Paced Courses</p>
 
                <div class="active title">
                    <i class="dropdown icon"></i>
                    Data Structures and Algorithms - Self Paced
                </div>
                <div class="active content">
                     
<p>
                        Most popular course on DSA trusted by 
                        over 50,000 students! Built with years 
                        of experience by industry experts and 
                        gives you a complete package of video 
                        lectures, practice problems, quizzes, 
                        discussion forums and contests. Start 
                        Today!
                    </p>
 
                </div>
                <div class="title">
                    <i class="dropdown icon"></i>
                    Amazon SDE Preparation Test Series
                </div>
                <div class="content">
                     
<p>
                        A test series that will help you prepare 
                        for coding interviews for Amazon and 
                        other product-based companies.Programming 
                        questions similar to those asked in 
                        real-time Amazon interviews.The perfect
                        test series to practice and test your 
                        skills!
                    </p>
 
                </div>
                <div class="title">
                    <i class="dropdown icon"></i>
                    Complete Interview Preparation - Self Paced
                </div>
                <div class="content">
                     
<p> 
                        An interview-centric course designed to 
                        prepare you for the role of SDE for both 
                        product and service based companies.
                        A placement preparation pack built with 
                        years of expertise. Prepare C++, Java, 
                        DSA, CS Theory concepts and much more!
                    </p>
 
                </div>
            </div>
        </div>
    </div>
    <script>
        $('.ui.accordion').accordion();
    </script>
</body>
 
</html>

Output: You can see the accordion in the dark background as shown in the image below. All the content of the accordion are in the dark background since the accordion is tagged with inverted class.

Accordion Inverted Variation

Example 2:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Accordion Menu</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>
    <br /><br />
    <div class="ui container">
        <h2 class="ui header green">GeeksforGeeks</h2>
        <b>
 
             
<p>Semantic UI Accordion Inverted Variation</p>
 
 
        </b>
        <hr><br />
        <div class="ui inverted segment">
            <div class="ui inverted accordion">
                <div class="item">
                    <a class="active title">
                        <i class="dropdown icon"></i>
                        Choose Your favourite coding language
                    </a>
                    <div class="active content">
                        <div class="ui inverted form">
                            <div class="grouped fields">
                                <div class="field">
                                    <div class="ui  radio checkbox">
                                        <input type="radio"
                                            name="test" value="ds">
                                        <label>C++</label>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui radio checkbox">
                                        <input type="radio"
                                            name="test" value="web">
                                        <label>Java</label>
                                    </div>
                                </div>
                                <div class="field">
                                    <div class="ui radio checkbox">
                                        <input type="radio" name="test"
                                            value="programming">
                                        <label>Python</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $('.ui.accordion').accordion();
        $('.ui.radio.checkbox').checkbox();
    </script>
</body>
 
</html>