A Material Design Expanded List with Javascript / JQuery

MatD Expanded List is a small component that can generate a Material Design expanded list.

Browser Support

The MatD Expanded List is intended for "modern" browsers ( Chrome, Safari, Edge, Firefox, etc ) and IE11

Dependencies

MatD Expanded List has been tested on jQuery 3.3.1 but should work with jQuery 2.1 and 1.7

How to use

To get started, place the following lines in your web page or application:

<link rel="stylesheet" href="js/matd_expand_list/matd_expandlist.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="s/matd_expand_list/matd_expand_list.min.js"></script>

Then, provide an array of objects that represent the visible areas of the expanded list, with the command targeting the zone the list should appear in. Like so:

$('#test').matd_expandlist({...});

Option Syntax

There are three main zones to an expanded list: the Header, Subheader and Details. Of these, the header is required.

All three support any type of content, even HTML tags. It is recommended that the rich experience ( images, html, etc ) be reserved for the detail area.

An example would be:

{"list":[
	{"heading":"First row",
 	 "secondary_heading": "This is a subheading for row 1",
	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
	{"heading":"Second row",
	 "secondary_heading": "This is a subheading for row 2",
	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
	{"heading":"Third row",
	 "secondary_heading": "This is a subheading for row 3",
 	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."} 	 
 ]}

Which can be applied like so:

var _param = {"list":[
	{"heading":"First row",
 	 "secondary_heading": "This is a subheading for row 1",
	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
	{"heading":"Second row",
	 "secondary_heading": "This is a subheading for row 2",
	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."},
	{"heading":"Third row",
	 "secondary_heading": "This is a subheading for row 3",
 	 "details":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget."} 	 
 ]};

 $('#test3').matd_expandlist(_param);

License

Copyright (c) 2019 C. B. Ash

Licensed under the MIT License

While this is my own pet project, I always enjoy getting suggestions for improvement here.