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 predefined CSS and jQuery to incorporate into different frameworks.
In this article, we will learn about the different kinds of accordions available in Semantic UI. Having a different type of accordion is good for any developer. The accordion type is used to specify the type of accordion used for the particular condition. There are 2 types of accordion in Semantics UI that are described below.
Accordion Type:
- Accordion: This is a standard accordion with a basic collapse feature to render the content, without any decoration or style.
- Style Accordion: This is a styled accordion containing the different pre-defined classes that can be utilized to decorate the accordion. A styled accordion adds basic formatting.
Syntax:
<div class="ui accordion"> Content </div>
We will understand the implementation of the Semantic-UI Accordion Types through the examples.
Example 1: This example illustrates the Semantic-UI Standard Accordion Type.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Accordion Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui text container" >
< h1 class = "ui green header center aligned" >
GeeksforGeeks
</ h1 >
< h3 class = "ui header center aligned" >
Semantic UI Accordion Types
</ h3 >
< h4 >Accordion:</ h4 >
< div class = "ui 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 >
</ div >
< script >
$('.ui.accordion').accordion();
</ script >
</ body >
</ html >
|
Output:
Example 2: This example illustrates the Semantic-UI Styled Accordion Type.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Accordion Types</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui text container" >
< h1 class = "ui green header center aligned" >
GeeksforGeeks
</ h1 >
< h3 class = "ui header center aligned" >
Semantic UI Accordion Types
</ h3 >
< h4 >Style Accordion:</ h4 >
< div class = "ui styled 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 >
</ div >
< script >
$('.ui.accordion').accordion();
</ script >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/accordion.html#accordion