Dynamic Material Design Expansion Panel In jQuery - matd_expandlist.js
File Size: | 17 KB |
---|---|
Views Total: | 2748 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.