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. It uses a class to add CSS to the elements.
The accordion is the interactive user interface that allows us to toggle the display of sections like hiding and showing.
jQuery Code:
$('.ui.accordion').accordion();
Example 1: This example using Semantic-UI to create an accordion.
<!DOCTYPE html> < html >
< head >
< title >Semantic-UI Accordion</ title >
< link href=
rel="stylesheet" />
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
</ head >
< body >
< div style="margin-top: 20px" class="ui container">
< div class="ui accordion">
< div class="active title">
< i class="dropdown icon"></ i >
What is Geeksforgeeks?
</ div >
< div class="active content">
< p >
Geeksforgeeks is a platform where
you can find solution to any king
of computer science related problem
</ p >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
What is Internshala?
</ div >
< div class="content">
< p >
It's an online platform which
provide opportunity for student
to get internship.
</ p >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
What is Semantic-ui:
</ div >
< div class="content">
< p >
It's a really cool framework
by which you can do cool stuff
</ p >
</ div >
</ div >
</ div >
< script >
$('.ui.accordion').accordion();
</ script >
</ body >
</ html >
|
Output:
But the output of the above example looks so simple. To make it look really cool like all this in a square box, You just add a styled class like ‘UI styled accordion’.
Example 2: This example using Semantic-UI to create a stylish accordion.
<!DOCTYPE html> < html >
< head >
< title >Semantic-UI Accordion</ title >
< link href=
rel="stylesheet" />
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
</ head >
< body >
< div style="margin-top: 20px" class="ui container">
< div class="ui accordion">
< div class="active title">
< i class="dropdown icon"></ i >
What is Geeksforgeeks?
</ div >
< div class="active content">
< p >
Geeksforgeeks is a platform where
you can find solution to any king
of computer science related problem
</ p >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
What is Internshala?
</ div >
< div class="content">
< p >
It's an online platform which
provide opportunity for student
to get internship.
</ p >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
What is Semantic-ui:
</ div >
< div class="content">
< p >
It's a really cool framework
by which you can do cool stuff
</ p >
</ div >
</ div >
</ div >
< script >
$('.ui.accordion').accordion();
</ script >
</ body >
</ html >
|
Output:
Example 3: This example using Semantic-UI to create a nested accordion.
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Nested Accordion</ title >
< link href=
rel="stylesheet" />
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
</ head >
< body >
< div style="margin-top: 20px" class="ui container">
< div class="ui styled accordion">
< div class="active title">
< i class="dropdown icon"></ i >
Geeksforgeeks Articles
</ div >
< div class="active content">
Data Structure
< div class="accordion">
< div class="active title">
< i class="dropdown icon"></ i >
Link-List
</ div >
< div class="active content">
< p >Types of Link-List</ p >
< div class="accordion">
< div class="title">
< i class="dropdown icon"></ i >
Singly Link-List
</ div >
< div class="content">
It contain data part and next pointer.
</ div >
< div class="title">
< i class="dropdown icon"></ i >
Doubly Link-List
</ div >
< div class="content">
It contain data part, next and prev pointer.
</ div >
</ div >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
Tree
</ div >
< div class="content">
Binary Tree
</ div >
</ div >
</ div >
< div class="title">
< i class="dropdown icon"></ i >
Geekforgeeks Courses
</ div >
< div class="content">
< p >Courses</ p >
< div class="accordion">
< div class="active title">
< i class="dropdown icon"></ i >
Web Technologies
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.accordion').accordion();
</ script >
</ body >
</ html >
|
Output:
Example 4: This example using Semantic-UI to create an accordion menu. Here we will use checkbox and radio button.
jQuery Code:
$('.ui.accordion').accordion(); $('.ui.radio.checkbox').checkbox(); $('.ui.checkbox').checkbox();
Complete code:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI Accordion Menu</ title >
< link href=
rel="stylesheet" />
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</ script >
< script src=
</ script >
</ head >
< body >
< div style="margin-top: 20px" class="ui container">
< div class="ui vertical accordion menu">
< div class="item">
< a class="active title">
< i class="dropdown icon"></ i >
Choose Test
</ a >
< div class="active content">
< div class="ui form">
< div class="grouped fields">
< div class="field">
< div class="ui radio checkbox">
< input type="radio"
name="test" value="ds">
< label >Data Structure</ label >
</ div >
</ div >
< div class="field">
< div class="ui radio checkbox">
< input type="radio"
name="test" value="web">
< label >Web Technology</ label >
</ div >
</ div >
< div class="field">
< div class="ui radio checkbox">
< input type="radio" name="test"
value="programming">
< label >Programming</ label >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< div class="item">
< a class="title">
< i class="dropdown icon"></ i >
Level (Atleast 1)
</ a >
< div class="content">
< div class="ui form">
< div class="grouped fields">
< div class="field">
< div class="ui checkbox">
< input type="checkbox"
name="easy">
< label >Easy</ label >
</ div >
</ div >
< div class="field">
< div class="ui checkbox">
< input type="checkbox"
name="intermediate">
< label >Intermediate</ label >
</ div >
</ div >
< div class="field">
< div class="ui checkbox">
< input type="checkbox"
name="diff">
< label >Difficult</ label >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.accordion').accordion();
$('.ui.radio.checkbox').checkbox();
$('.ui.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output: