Semantic-UI Accordion Styled Type
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.
The accordion type is used to specify the type of accordion used for the particular condition. The Semantic-UI Accordion Styled Type is used to add basic formatting to the accordion element.
Semantic-UI Accordion Styled Type Used Class:
- styled: It is used to add basic formatting to the accordion element.
Syntax:
<div class="ui styled accordion"> .... </div
Example 1: In this example, we will describe the Semantic-UI Accordion Styled Type.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Accordion Styled Type</ 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 Styled Type </ h3 > < 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:
Example 2: In this example, we will describe the Semantic-UI Accordion Styled Type with inverted variations.
HTML
<!DOCTYPE html> < html > < head > < title >Semantic-UI Accordion Styled Type</ 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 Styled Type </ h3 > < div class = "ui inverted styled segment" > < div class = "ui inverted 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 learn 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 > </ div > < script > $('.ui.accordion').accordion(); </ script > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/modules/accordion.html#styled
Contact Us