Material Design Expanded List ( matd_expand

Getting Started

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


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

To use, provide data values for the expanded list options ( see examples below ) and then initiate a call to the control by targeting the zone where the control will be placed:


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

or via direct function call ( in which the id must be provided in the parameters ):


	 $.fn.matd_expandlist(_param);

The examples below demonstrate both methods.

Examples

Basic use of the MatD Expanded List control

The most basic use is by calling the control and passing an array of elements to display as general headers. Like so:

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

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Use of the MatD Expanded List control to display header and subheader

The second use of the expandid list control is a list with a header and subheader

	 $('#test2').matd_epandlist({"list":[
	 {"heading":"First row","secondary_heading": "This is a subheading for row 1"},
	 {"heading":"Second row","secondary_heading": "This is a subheading for row 2"},
	 {"heading":"Third row","secondary_heading": "This is a subheading for row 3"}
	 ]});

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Use of the MatD Expanded List control to display header, subheader, and detail

This is the full use of the basic expanded list control. Here we display a list of headers. When selected, they expand to show the detail for each row.

	$('#test3').matd_expandlist({"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."}
	]});

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

the 'Details' can be more than just text

While its recommended that the main row header and subheader be text, the detail shares no such limitation.

	$('#test4').matd_expandlist({"list":[
		{"heading":"First row",
		"secondary_heading": "This is a subheading for row 1",
		"details":"A link to  Google! ."},
		{"heading":"Second row",
		"secondary_heading": "This is a subheading for row 2",
		"details":"A second link to  Google! ."},
		{"heading":"Third row",
		"secondary_heading": "This is a subheading for row 3",
		"details":"A third link to  Google! ."}
	]});

A demo of this is shown here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent aliquet cursus cursus.

Material Design Expanded List ( matd_expand_list ) Examples

Getting Started

Examples

Basic use of the MatD Expanded List control

Use of the MatD Expanded List control to display header and subheader

Use of the MatD Expanded List control to display header, subheader, and detail

the 'Details' can be more than just text