JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li class="subset">
<h2>Header 1</h2>
<ul class="collapse open">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li class="subset">
<h2>Header 2</h2>
<ul class="collapse">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>
<h2>Header 3</h2>
<ul class="collapse open">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>
<h2>Header 4</h2>
<ul class="collapse">
<li>A</li>
<li>B</li>
<li>
<h2>Header 5</h2>
<ul class="collapse open">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</li>
<li>D</li>
<li>E</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
ul{list-style:none;margin:0;padding:0;overflow:hidden;}
li{list-style:none;margin:0 0 2px 10px;padding:0;border-left:2px solid #999;overflow:hidden;}
.li_odds{background-color:#ffffff;}
.li_evens{background-color:#E9E9E9;}
JavaScript
//I am actually currently using jQuery 1.4.4
function zebraStyle()
{
//console.log($('.container > ul li:odd'));
$('ul > li:nth-child(odd)').addClass('li_odds');
$('ul > li:nth-child(even)').addClass('li_evens');
}
function findOpenRowSubs(ani)
{
$('.open')
.removeClass('collapse open')
.parentsUntil('.subset', 'ul.collapse')
.removeClass('collapse open');
}
$(document).ready(function()
{
findOpenRowSubs();
zebraStyle();
});