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