Semantic-UI | Accordion
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.
html
<!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.
html
<!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.
html
<!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:
html
<!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:
Please Login to comment...