Секции accordion
 

Есть конструкция
<div id="accordion">
<h3>Section 1</h3>
<div><p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.</p></div>
<h3>Section 2</h3>
<div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit</p></div>
<h3>Section 3</h3>
<div><p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.pellentesque.</p></div>
<h3>Section 4</h3>
<div><p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac</p></div>
</div>
как реализовать следующее...
при клике на одну из секций она раскрывается и делает остальные секции невидимыми (display:none;) после сворачивания секции все остальные становятся видимыми (display:block)
(в JS я не шарю)
мой набросок если h3 c "#ui-accordion-accordion-header-0" имеет класс .ui-state-active то div#ui-accordion-accordion-panel-1 (n) = (".display:none") else (."display:block");
надеюсь суть проблемы описал понятно