English 中文(简体)
MooTools - Accordion
  • 时间:2024-11-03

MooTools - Accordion


Previous Page Next Page  

Accordion is the most popular plugin that MooTools provides. It helps in hiding and reveapng the data. Let us discuss more about it.

Creating new accordion

The basic elements that an accordion requires are pairs of toggles and their contents. Let us create pairs of headings and contents of the html.

<h3 class = "togglers">Toggle 1</h3>
<p class = "elements">Here is the content of toggle 1</p>
<h3 class = "togglers">Toggle 2</h3>
<p class = "elements">Here is the content of toggle 2</p>

Take a look at the following syntax to understand how to build an accordion based on the above HTML structure.

Syntax

var toggles = $$( .togglers );
var content = $$( .elements );
var AccordionObject = new Fx.Accordion(toggles, content);

Example

Let us take an example that defines the basic functionapty of Accordion. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style>
         .togglers {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            pst-style: none;
            width: 300px;
            background-color: #222;
            border: 1px sopd;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent( domready , function() {
            var toggles = $$( .togglers );
            var content = $$( .elements );
            var AccordionObject = new Fx.Accordion(toggles, content);
         });
      </script>
   </head>
   
   <body>
      <h3 class = "togglers">Toggle 1</h3>
      <p class = "elements">Here is the content of toggle 1</p>
      <h3 class = "togglers">Toggle 2</h3>
      <p class = "elements">Here is the content of toggle 2</p>
      <h3 class = "togglers">Toggle 3</h3>
      <p class = "elements">Here is the content of toggle 3</p>
   </body>
   
</html>

You will receive the following output −

Output