Semantic-UI Accordion Types
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.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Accordion Types</ 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 > < div class = "ui text container" > < h1 class = "ui green header center aligned" > w3wiki </ 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 > w3wiki </ div > < div class = "active content" > < p > w3wiki 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.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic UI Accordion Types</ 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 > < div class = "ui text container" > < h1 class = "ui green header center aligned" > w3wiki </ 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 > w3wiki </ div > < div class = "active content" > < p > w3wiki 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