Accordion

This widget help building a beautiful accordion panel.

Demos

Theme: default

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

  <section data-am-widget="accordion" class="am-accordion am-accordion-default" data-am-accordion='{ "multiple": true }'>
      <dl class="am-accordion-item am-active am-disabled">
        <dt class="am-accordion-title">
          就这样恣意的活着
        </dt>
        <dd class="am-accordion-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </dd>
      </dl>
  </section>

Theme: basic

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

  <section data-am-widget="accordion" class="am-accordion am-accordion-basic" data-am-accordion='{  }'>
      <dl class="am-accordion-item am-active">
        <dt class="am-accordion-title">
          就这样恣意的活着
        </dt>
        <dd class="am-accordion-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </dd>
      </dl>
  </section>

Theme: gapped

就这样恣意的活着: 置身人群中
你只需要被淹没享受沉默
退到人群后
你只需给予双手微笑等候

让生命去等候，去等候，去等候，去等候: 走在忠孝东路
徘徊在茫然中
在我的人生旅途
选择了多少错误
我在睡梦中惊醒
感叹悔言无尽
恨我不能说服自己
接受一切教训
让生命去等候
等候下一个漂流
让生命去等候
等候下一个伤口

我就这样告别山下的家: 我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？

  <section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{  }'>
      <dl class="am-accordion-item am-active">
        <dt class="am-accordion-title">
          就这样恣意的活着
        </dt>
        <dd class="am-accordion-bd am-collapse am-in">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            置身人群中 <br/> 你只需要被淹没 享受 沉默 <br/> 退到人群后 <br/> 你只需给予双手 微笑 等候
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          让生命去等候，去等候，去等候，去等候
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            走在忠孝东路 <br/> 徘徊在茫然中 <br/> 在我的人生旅途 <br/> 选择了多少错误 <br/> 我在睡梦中惊醒 <br/> 感叹悔言无尽 <br/> 恨我不能说服自己 <br/> 接受一切教训 <br/> 让生命去等候 <br/> 等候下一个漂流 <br/> 让生命去等候 <br/>等候下一个伤口
          </div>
        </dd>
      </dl>
      <dl class="am-accordion-item">
        <dt class="am-accordion-title">
          我就这样告别山下的家
        </dt>
        <dd class="am-accordion-bd am-collapse ">
          <!-- 规避 Collapase 处理有 padding 的折叠内容计算计算有误问题， 加一个容器 -->
          <div class="am-accordion-content">
            我就这样告别山下的家，我实在不愿轻易让眼泪留下。我以为我并不差不会害怕，我就这样自己照顾自己长大。我不想因为现实把头低下，我以为我并不差能学会虚假。怎样才能够看穿面具里的谎话？别让我的真心散的像沙。如果有一天我变得更复杂，还能不能唱出歌声里的那幅画？
          </div>
        </dd>
      </dl>
  </section>

Usage

Copy and Paste

Copy the codes in examples, and paste it to the <body> of the Amaze UI HTML template(Download);
Replace the contents in examples with your own contents.

Using Handlebars

First, import Handlebars library and amui.widget.helper.js(See widget.html file in Amaze UI HTML Template).

Then use either following ways to bind data.

1. Insert the script of widget into the template:

<script type="text/x-handlebars-template" id="my-tpl">
  {{>accordion accordionData}}
</script>

Then query the template and pass the data to it.

$(function() {
  var $tpl = $('#my-tpl'),
      tpl = $tpl.text(),
      template = Handlebars.compile(tpl),
      data = {
        accordionData: {
          "theme": "basic",
          "content": [
            {
              "title": "Title 1",
              "content": "Content 1",
              "active": true
            },
            {
              "title": "Title 2",
              "content": "Content 2"
            },
            {
              "title": "Title 3",
              "content": "Content 3"
            }
          ]
        }
      },
      html = template(data);

  $tpl.before(html);
});

The rendered HTML looks like this:

<section data-am-widget="accordion" class="am-accordion am-accordion-basic doc-accordion-class"
         id="doc-accordion-example" data-accordion-settings="{  }">
  <dl class="am-accordion-item am-active">
    <dt class="am-accordion-title">Title 1</dt>
    <dd class="am-accordion-content">Content 1</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">Title 2</dt>
    <dd class="am-accordion-content">Content 2</dd>
  </dl>
  <dl class="am-accordion-item">
    <dt class="am-accordion-title">Title 3</dt>
    <dd class="am-accordion-content">Content 3</dd>
  </dl>
</section>

If there are other widget or templates in the same page, we recommend using this way. Maintenance will be easier in this way.

Second, Directly render the widget with Handlebars：

var template = Handlebars.compile('{{>accordion}}'),
    data = {
      accordionData: {
        "id": "doc-accordion-example",
        "className": "doc-accordion-class",
        "theme": "basic",
        "content": [
          {
            "title": "Title 1",
            "content": "Content 1",
            "active": true
          },
          {
            "title": "Title 2",
            "content": "Content 2"
          },
          {
            "title": "Title 3",
            "content": "Content 3"
          }
        ]
      }
    },
    html = template(data.accordionData);

$('body').append(html);

Allmobilize WebIDE

Drag the widget to the edit interface;
Click the Data binding button on the right panel, and bind data using following format.

var data = [
  {
    "title": "",    // Title. Support using html
    "content": ""   // Content. Support using html
  }
];

return data;

Data Interface

{
  // ID
  "id": "",

  // Customized class
  "className": "",

  // Theme
  "theme": "",

  "options": {
    "multiple": false // Allow opening multiple panel at the same time. Default value is FALSE.
  },

  // Content(* means required)
  "content": [
    {
      "title": "", // Title. Support using html
      "content": "", // Content. Support using html
      "active": false // Whether activate current panel.
      // New in Amaze UI 2.3
      "disabled": null // Whether diable current panel.
    }
  ]
}

Attention:

Don't use padding/margin/border for .am-accordion-bd.

Amaze UI 2.4

Web Components