javascript - mootools fx.Accordian content not showing for some reason -

i'm new mootools , i'm trying implement fx.accordian plugin.

i've included mootools accordian plugin. i'm not trying different shown in demo mootools web site.

in css, i've inserted:

#accordion  {   margin: 20px 0 0;   max-width: 400px; }  #accordion h2 {     background: #99ccff;     color: black;     cursor: pointer;     font-size: 10pt;      font-family: helvetica, arial, sans-serif;      text-align: left;     font-weight: bold;     line-height: 16px;     margin: 0 0 4px 0;     padding: 3px 5px 1px;   }  #accordion .accordion_content {     background-color: #f4f5f5; }  #accordion .accordion_content p {     margin: 0.5em 0;     padding: 0 6px 8px 6px; } 

inside script tag in header file have:

window.addevent('domready', function(){    new fx.accordion($('accordion'), '#accordion h2', '#accordion .accordion_content'); }); 

and i'm trying following in html:

<div id='accordion' class='customized'> <h2>what not #1</h2> <div class='accordion_content'>     <p>what not #1 being displayed now</p> </div> </div> 

i accordion h2 displaying properly, however, when click on accordion content doesn't display. can me see why isn't working?

there nothing wrong code, need add more accordion sections html. documentation:

"the fx.accordion class creates group of elements toggled when handles clicked. when 1 element toggles view, others toggle out."

so accordion single element not make sense - being one, active element no matter do.

i added 1 more <h2> toggler , content <div> original code , works perfectly. see http://jsfiddle.net/yayqd/1/