Semantic-UI Accordion Variations
Last Updated :
10 Jun, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI Accordion variations are used to create accordions with different variations. Semantic UI accordion offers the following variations.
Semantic-UI Accordion Variation class:
- fluid: This class is used to create an accordion that can take up the width of its container.
- inverted: This class is used to format to appear on dark backgrounds.
Syntax:
<div class="ui fluid accordion">
....
</div>
Example 1: The following code demonstrates the Semantic UI fluid accordion variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<style>
button {
width: 170px;
}
.accordion {
width: 600px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<strong>Semantic UI Variations Accordion</strong>
</center>
<br><br>
<strong>Accordion Variations:</strong>
<div class="ui styled fluid 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>
</body>
</html>
|
Output:
Semantic-UI Accordion Variations
Example 2: The following code demonstrates the Semantic UI inverted accordion variation.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
<style>
body
{
margin-left:10px;
margin-right:10px;
}
button {
width: 170px;
}
.accordion {
width: 600px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>Geeksforgeeks</h1>
<strong>Semantic UI Inverted accordion variation</strong>
</center>
<br><br>
<strong>Inverted Accordion Variant:</strong>
<div class="ui inverted segment">
<div class="ui inverted 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>...</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
HTML
</div>
<div class="content">
<p>...</p>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Accordion Variations
Reference Link: https://semantic-ui.com/modules/accordion.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...