Dynamic Material Design Expansion Panel In jQuery - matd_expandlist.js

A dynamic Material Design Expansion Panel plugin which enables you to expand/collapse panels by clicking/tapping headers just like the accordion interface.

Perfect for details-summary view, FAQ system, and much more.

How to use it:

1. Insert jQuery JavaScript library (slim build is recommended) and the matd_expandlist.js plugin's files into the HTML file.

<link rel="stylesheet" href="/path/to/matd_expandlist.css">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/matd_expandlist.min.js"></script>

2. The most basic use is by calling the function and passing an array of elements to display as general headers as follows.

<div id="test"></div>

$('#test').matd_epandlist({
  "list":[
    {"heading":"First row"},
    {"heading":"Second row"},
    {"heading":"Third row"}
  ]
});

3. This is the full use of the expansion Panel plugin. Here we display a list of headers. When selected, they expand to show the detail for each row.

$('#test').matd_expandlist({
  "list":[
    {
      "heading":"First row",
      "secondary_heading": "This is a subheading for row 1",
      "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "heading":"Second row",
      "secondary_heading": "This is a subheading for row 2",
      "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    },
    {
      "heading":"Third row",
      "secondary_heading": "This is a subheading for row 3",
      "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }
  ]
});

4. The plugin also allows HTML content to be displayed in the details.

$('#test').matd_expandlist({
  "list":[
    {
      "heading":"First row",
      "secondary_heading": "This is a subheading for row 1",
      "details":"<a href='//www.google.com' target='newwin'><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg> Google</a>"
    },
    {
      "heading":"Second row",
      "secondary_heading": "This is a subheading for row 2",
      "details":"<a href='//www.google.com' target='newwin'><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg> Google</a>"
    },
    {
      "heading":"Third row",
      "secondary_heading": "This is a subheading for row 3",
      "details":"<a href='//www.google.com' target='newwin'><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M0 0h24v24H0z' fill='none'/><path d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/></svg> Google</a>"
    }
  ]
});

Changelog:

2019-05-22

• swapped paragraph tags for div tags in layout.

---

This awesome jQuery plugin is developed by CBairdAsh. For more Advanced Usages, please check the demo page or visit the official website.