JSFiddle - React, Tailwind, and code Playground
HTML
<div class="scroll">
<ul id="expander" class="reports_list">
<li class="closed">
<h4>Ethylene Asia Margin Report Weekly</h4>
<p>20th Oct 2010</p>
<ul class="pdf">
<li><a href="#" target="_blank" title="PDF document: opens in a new window">22 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">15 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">08 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">01 October 2010</a></li>
</ul>
</li>
<li class="closed">
<h4>ABS Europe weekly</h4>
<p>19th Oct 2010</p>
<ul class="pdf">
<li><a href="#" target="_blank" title="PDF document: opens in a new window">12 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">04 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">01 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">01 October 2010</a></li>
</ul>
</li>
<li class="closed">
<h4>Ethylene Asia Margin Report Weekly</h4>
<p>20th Oct 2010</p>
<ul class="pdf">
<li><a href="#" target="_blank" title="PDF document: opens in a new window">22 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">15 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">08 October 2010</a></li>
<li><a href="#" target="_blank" title="PDF document: opens in a new window">01 October 2010</a></li>
</ul>
...
JavaScript
$("#expander ul").hide();
$("#expander h4").live("click", function() {
$(this).siblings("ul").toggle("fast", function(){
$(this).closest("li").toggleClass("open closed");
}).closest("li").siblings(".open").toggleClass("open closed").children("ul").hide("fast");
$(".scroll").jScrollPane();
});