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:

IndexClassDescription
1)accordion-listIt is a class which contains a group of accordion items list. It is optional.
2)accordion-itemIt is a required class for single accordion item.
3)accordion-item-toggleIt is a required class used to expand accordion item content.
4)accordion-item-contentIt is a required class used for hidden accordion item content.
5)accordion-item-expandedIt 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:

IndexEventDescription
1)openThis event is fired when you open an animation.
2)openedThis event is fired when the opening of an animation is completed.
3)closeThis event is fired when you close an animation.
4)closedThis 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

This Post Has One Comment

Leave a Reply

WC Captcha + 43 = 53