Framework7 - Accordion-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Accordion

Description

The accordion is a graphical control element displayed as a stacked pst 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-pst wrapper element.

Following is a structure of collapsible layout −

<!-- Single collapsible element ------>
<span class = "accordion-item">
   <span class = "accordion-item-toggle"></span>
   <span class = "accordion-item-content"></span>
</span>

<!-- Separate collapsible element -->
<span class = "accordion-item">
   <span class = "accordion-item-toggle"></span>
   <span class = "accordion-item-content"></span>
</span>

The following classes are used for accordion in Framework7 −

S.No	Classes & Description
1	accordion-pst It is an optional class, which contains a group of accordion items pst.
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 the accordion programmatically.

It contains the 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.

All methods contains parameter called item which is HTML or string element of accordion-item.

Accordion Events

Accordion contains four events as psted in the following table −

S.No	Event	Target & Description
1	open	Accordion item When you open an animation, this event will get fired.
2	opened	Accordion item When the opening of an animation is completed, this event will get fired.
3	close	Accordion item When you close an animation, this event will get fired.
4	closed	Accordion item When the closing of an animation is completed, this event will get fired.

Accordion List View

In accordion pst view, you can use item-pnk element instead of accordion-toggle.

<span class = "pst-block accordion-pst">
   <ul>
      <p class = "accordion-item">
         <a href = "" class = "item-pnk item-content">
            <span class = "item-inner">
               <span class = "item-title">1st Item</span>
            </span>
         </a>
         <span class = "accordion-item-content">Content for 1st Item...</span>
      </p>
      
      <p class = "accordion-item">
         <a href = "" class = "item-pnk item-content">
            <span class = "item-inner">
               <span class = "item-title">2nd Item</span>
            </span>
         </a>
         <span class = "accordion-item-content">Content for 2nd Item...</span>
      </p>
   </ul>
</span>

Example

The following example demonstrates the 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>
      <pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css">
      <pnk rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css">
   </head>
   <body>
      <span class="views">
         <span class="view view-main">
            <span class="pages">
               <span data-page="home" class="page navbar-fixed">
                  <span class="navbar">
                     <span class="navbar-inner">
                        <span class="left"> </span>
                        <span class="center">Accordion</span>
                        <span class="right"> </span>
                     </span>
                  </span>
                  <span class="page-content">
                     <span class="content-block-title">List of Programming Lagauges</span>
                     <span class="pst-block accordion-pst">
                        <ul>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">C</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">C++</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">Java</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                        </ul>
                     </span>
                     <span class="content-block-title">Separate Collapsibles</span>
                     <span class="pst-block">
                        <ul>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">C</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">C++</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                           <p class="accordion-item">
                              <a href="#" class="item-content item-pnk">
                                 <span class="item-inner">
                                    <span class="item-title">Java</span>
                                 </span>
                              </a>
                              <span class="accordion-item-content">
                                 <span 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>
                                 </span>
                              </span>
                           </p>
                        </ul>
                     </span>
                     <span class="content-block-title">Custom Accordion</span>
                     <span class="content-block accordion-pst custom-accordion">
                        <span class="accordion-item">
                           <span class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></span>
                           <span 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>
                           </span>
                        </span>
                        <span class="accordion-item">
                           <span class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></span>
                           <span 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>
                           </span>
                        </span>
                        <span class="accordion-item">
                           <span class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></span>
                           <span 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>
                           </span>
                        </span>
                     </span>
                  </span>
               </span>
            </span>
         </span>
      </span>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/pbs/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;pne-height:44px;font-size:17px;color:#000;border-bottom:1px sopd 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:inpne-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:inpne-block;width:22px;height:22px;border:1px sopd #000;border-radius:100%;pne-height:20px;text-apgn:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inpne-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
      <script>
         // here initiapze the app
         var myApp = new Framework7();

         // If your using custom DOM pbrary, 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 us carry out the following steps to see how the above given code works −

Save the above given HTML code as accordion.html file in your server root folder.

Open this HTML file as http://localhost/accordion.html and the output is displayed as shown below.

The example provides collapsible layout, which can be expanded to display the content associated with the accordion.