Description
The accordion is a graphical control element displayed as a stacked list of items. Each accordion can be expanded or stretched to reveal the content associated with that accordion.Collapsible Layout
When you are using single separate collapsible element, you need to omit the accordion-list wrapper element.Following is a structure of collapsible layout:
<!-- Single collapsible element ------> <div class="accordion-item"> <div class="accordion-item-toggle"></div> <div class="accordion-item-content"></div> </div> <!-- Separate collapsible element --> <div class="accordion-item"> <div class="accordion-item-toggle"></div> <div class="accordion-item-content"></div> </div> </div>The below classes are used for accordion in the Framework7:
| S.N. | Classes & Description |
|---|---|
| 1 | accordion-list It is a optional class contains group of accordion items list. |
| 2 | accordion-item It is a required class for single accordion item. |
| 3 | accordion-item-toggle It is a required class used to expand accordion item content. |
| 4 | accordion-item-content It is a required class used for hidden accordion item content. |
| 5 | accordion-item-expanded It is a single expanded accordion item. |
Accordion JavaScript API
JavaScript API methods are used to open and close accordion programmatically.It contains following JavaScript API methods:
- myApp.accordionOpen(item): Used to open accordion.
- myApp.accordionClose(item): Used to close accordion.
- myApp.accordionToggle(item): Used to toggle accordion.
Accordion Events
Accordion contains four events as listed in the below table:| S.N. | Event | Target & Description |
|---|---|---|
| 1 | open | Accordion item When you open an animation, this event will get fired. |
| 2 | opened | Accordion item When you completes the opening of an animation, this event will get fired. |
| 3 | close | Accordion item When you close an animation, this event will get fired. |
| 4 | closed | Accordion item When you completes the closing of an animation, this event will get fired. |
Accordion List View
In accordion list view, you can use item-link element instead of accordion-toggle.<div class="list-block accordion-list"> <ul> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">1st Item</div> </div> </a> <div class="accordion-item-content">Content for 1st Item...</div> </li> <li class="accordion-item"> <a href="" class="item-link item-content"> <div class="item-inner"> <div class="item-title">2nd Item</div> </div> </a> <div class="accordion-item-content">Content for 2nd Item...</div> </li> </ul> </div>
Example
The below example demonstrates use of accordion in the Framework7:<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Accordion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"> </head> <body> <div class="views"> <div class="view view-main"> <div class="pages"> <div data-page="home" class="page navbar-fixed"> <div class="navbar"> <div class="navbar-inner"> <div class="left"> </div> <div class="center">Accordion</div> <div class="right"> </div> </div> </div> <div class="page-content"> <div class="content-block-title">List of Programming Lagauges</div> <div class="list-block accordion-list"> <ul> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">C</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p> </div> </div> </li> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">C++</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This reference will take you through simple and practical approach while learning C++ Programming language. </p> </div> </div> </li> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">Java</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java. This reference will take you through simple and practical approach while learning Java Programming language. </p> </div> </div> </li> </ul> </div> <div class="content-block-title">Separate Collapsibles</div> <div class="list-block"> <ul> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">C</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p> </div> </div> </li> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">C++</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This reference will take you through simple and practical approach while learning C++ Programming language. </p> </div> </div> </li> <li class="accordion-item"> <a href="#" class="item-content item-link"> <div class="item-inner"> <div class="item-title">Java</div> </div> </a> <div class="accordion-item-content"> <div class="content-block"> <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java. This reference will take you through simple and practical approach while learning Java Programming language. </p> </div> </div> </li> </ul> </div> <div class="content-block-title">Custom Accordion</div> <div class="content-block accordion-list custom-accordion"> <div class="accordion-item"> <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div> <div class="accordion-item-content"> <p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p> </div> </div> <div class="accordion-item"> <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div> <div class="accordion-item-content"> <p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This reference will take you through simple and practical approach while learning C++ Programming language. </p> </div> </div> <div class="accordion-item"> <div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div> <div class="accordion-item-content"> <p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java. This reference will take you through simple and practical approach while learning Java Programming language. </p> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style> <script> // here initialize the app var myApp = new Framework7(); // If your using custom DOM library, then save it to $$ variable var $$ = Dom7; // Add the view var mainView = myApp.addView('.view-main', { // enable the dynamic navbar for this view: dynamicNavbar: true }); </script> </body> </html>
Output
Let's carry out the following steps to see how above code works:-
Save above HTML code as accordion.html file in your server root folder.
-
Open this HTML file as http://localhost/accordion.html and output as below gets displayed.
- The example provides collapsible layout which can be expanded to display the content associated with the accordion.
No comments:
Post a Comment