Framework7 Accordion is a graphical control element which is displayed as a stacked list of items. You can expand or collapse an accordion to show the content associated with that accordion.
Accordion Layout
See how an accordion layout looks like:
<div class="accordion-list">
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item accordion-item-expanded">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
...
</div>
Collapsible Layout
When you use single separate collapsible element, you need to omit the accordion-list wrapper element.
See the structure of collapsible layout:
<!-- Single collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
<!-- Another separate collapsible element -->
<div class="accordion-item">
<div class="accordion-item-toggle">...</div>
<div class="accordion-item-content">...</div>
</div>
Accordion List View
If you want to set Accordion List View, 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">Item 1</div>
</div>
</a>
<div class="accordion-item-content">Item 1 content ...</div>
</li>
<li class="accordion-item">
<a href="" class="item-link item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</a>
<div class="accordion-item-content">Item 2 content ...</div>
</li>
</ul>
</div>
Classes used for Accordion in Framework7
Following is a list of classes used for Accordion in Framework7:
| Index | Class | Description |
|---|---|---|
| 1) | accordion-list | It is a class which contains a group of accordion items list. It is optional. |
| 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. |
JavaScript API for Accordion
JavaScript API are method used to open and close accordion programmatically. There are 3 JavaScript API methods:
- myApp.accordionOpen(item): It is used to open accordion.
- myApp.accordionClose(item): It is used to close accordion.
- myApp.accordionToggle(item): It is used to toggle accordion.
Accordion Events
There are 4 events listed for Accordion in Framework7:
| Index | Event | Description |
|---|---|---|
| 1) | open | This event is fired when you open an animation. |
| 2) | opened | This event is fired when the opening of an animation is completed. |
| 3) | close | This event is fired when you close an animation. |
| 4) | closed | This event is fired when the closing of an animation is completed. |
Example
<!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">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>
Next Topic:-Click Here
Pingback: Framework7 List Views - Adglob Infosystem Pvt Ltd