Toggle Class - Expand List Items as Panels

by bizamajig

HTML

<ul>
    <li>Click to "expand"</li>
    <li>Click to "expand"</li>
    <li>Click to "expand"</li>
    <li>Click to "expand"</li>
    <li>Click to "expand"</li>
</ul>

CSS

ul {
    margin: 1em;
}

li {
    background:#ccc;
    border-color: black;
    border-style: solid;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    padding: 5px;
}

li:first-child,
li.expanded + li {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-width: 1px;
}

li:last-child,
li.precedes-expanded {
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-width: 1px;
}

li.expanded {
    margin: 5px 0px;
    border-radius: 5px 5px 5px 5px;
    border-width: 1px;
    padding: 2em 5px;
}

JavaScript

/*
$ ->
    $("li").click ->
        li = $ this
        li.toggleClass "expanded"
        li.prev().toggleClass "precedes-expanded"
*/        
        
	$( document ).on( 'click', 'li', function ( e ) {
		e && e.preventDefault();
		var $this_element        = $(this);

		$this_element.toggleClass( 'expanded' );
		$this_element.prev().toggleClass( 'precedes-expanded' );
	});