JSFiddle - React, Tailwind, and code Playground

by magikMaker

HTML

<div ng-app="app">    

    <h1>Collapsable test</h1>
    <ul ng-controller="highlightController">
	    <li ng-repeat="item in items"
	        ng-click="highlight($event)">
    		{{item}}
	    </li>
    </ul>

</div>

CSS

li {
	background-color: #cecece;
	border: 1px solid #999;
	list-style: none;
	margin-bottom: 0.1em;
	padding: 0.5em 0.25em;
}

li.open {
	background-color: #0c0;
}

JavaScript

angular
    .module('app', [])
    .controller('highlightController', function($scope) {
    	var lastClickedItem;
    	
    	// TODO inject a service that retrieves the items
    	$scope.items = [
			'item 1',
			'item 2',
			'item 3'
	    ];
	    
	    $scope.highlight = function($event){
			var element = $event.target;
			
			[].forEach.call(element.parentNode.childNodes, function(li) {

                if(li.classList && lastClickedItem !== element){
                    li.classList.remove('open');
                }
			});
            
		    element.classList.toggle('open');            
            lastClickedItem = element;
	    };
	});