Semantic-UI Accordion Inverted Variation
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" >w3wiki</ h2 > < b > < p >Semantic UI Accordion Inverted Variation</ p > </ b > < hr >< br /> < div class = "ui inverted segment" > < div class = "ui inverted accordion" > < p >Beginner for Beginner 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.
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" >w3wiki</ 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 > |
Output: You can see the accordion in the dark background as shown in the image below.
Reference: https://semantic-ui.com/modules/accordion.html#inverted
Contact Us