Framework7 Accordion/ Collapsible

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>

Test it Now

Output: