JSFiddle - React, Tailwind, and code Playground
HTML
<div id="listContainer">
<ul id="expList">
<li style="">
<label style="margin-top: 50px;border-style: solid; border-width: 1px; border-color: #7C7C7C; background-color:#E0E0E0">Item A</label>
<ul>
<li>itens lista A</li>
</ul>
</li>
</ul>
</div>
CSS
#listContainer {
margin-top: 15px;
}
#expList li {
background-color: #dbb;
}
#expList ul, li, label {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li, label {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
#expList .collapsed {
/*background-image: url(/MVCxTreeListDemos/DXR.axd?r=1_15-5M3g9);*/
}
#expList .expanded {
/*background-image: url(/MVCxTreeListDemos/DXR.axd?r=1_15-5M3g9);*/
}
#expList {
clear: both;
}
.listControl {
margin-bottom: 15px;
}
.listControl a {
border: 1px solid #555555;
color: #555555;
cursor: pointer;
height: 1.5em;
line-height: 1.5em;
margin-right: 5px;
padding: 4px 10px;
}
.listControl a:hover {
background-color: #555555;
color: #222222;
font-weight: normal;
}
JavaScript
$(document).ready(function () {
prepareList()
});
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function (event) {
alert(this == event.target ? 'this == event.target' : 'this != event.target')
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function () {
$('.collapsed').addClass('expanded');
$('.collapsed').children().show('medium');
})
$('#collapseList')
.unbind('click')
.click(function () {
$('.collapsed').removeClass('expanded');
$('.collapsed').children().hide('medium');
})
};