accodion is not working

Reference site: http://stickmanlabs.com/accordion/

I used this accordion for couple of sites and working fine however I
have problem setting it up with CakePHP environment.

my code:
====================================================
<div id="vertical_container">
<h2 class="accordion_toggle"> title 1 </h2>
<div class="accordion_content"> aaa </div>
<h2 class="accordion_toggle"> title 2 </h2>
<div class="accordion_content"> bbb </div>
<h2 class="accordion_toggle"> title 3 </h2>
<div class="accordion_content"> ccc </div>
</div> <!-- <div id="vertical_container"> -->
====================================================

Issue:
1) when I access the site first time all accordions are looks like all
opened already but not supposed to be that way.
I set only first top one is opened when user access the site first
time.
Looks like in style code is correct:
==============================================================
<div id="vertical_container">
<h2 class="accordion_toggle accordion_toggle_active"> title 1 </h2>
<div class="accordion_content" style="height: auto; display: block;
font-size: 14.6667px; width: 191px;"> aaa </div>
<h2 class="accordion_toggle"> title 2 </h2>
<div class="accordion_content" style="height: 0px;"> bbb </div>
<h2 class="accordion_toggle"> title 3 </h2>
<div class="accordion_content" style="height: 0px;"> ccc </div>
</div>
==============================================================
but second accordion and title3 is overwrite each other

2) when I click top accordion(title1) - it colosed( looks like working
ok) but if I click again there is no response
===============================================================
<div id="vertical_container">
<h2 class="accordion_toggle"> title 1 </h2>
<div class="accordion_content" style="height: 0px; display: block;
font-size: 0px; width: 0px;"> aaa </div>
<h2 class="accordion_toggle"> title 2 </h2>
<div class="accordion_content" style="height: 0px;"> bbb </div>
<h2 class="accordion_toggle"> title 3 </h2>
<div class="accordion_content" style="height: 0px;"> ccc </div>
</div>
===============================================================
no matter how many time I click title1, there is no response.

so i click title 2 (second accordion) and open fine, and click again
to close but same thing's haapend with title1.
no response from "title2"

3) I click "title1"(top accordion) then it's opened but there is no
contents display(looks like empty)
================================================================
<div id="vertical_container">
<h2 class="accordion_toggle accordion_toggle_active"> title 1 </h2>
<div class="accordion_content" style="height: auto; display: block;
font-size: 0px; width: 0px;"> aaa </div>
<h2 class="accordion_toggle"> title 2 </h2>
<div class="accordion_content" style="height: 0px; display: none; font-
size: 0px; width: 0px;"> bbb </div>
<h2 class="accordion_toggle"> title 3 </h2>
<div class="accordion_content" style="height: 0px;"> ccc </div>
</div>
================================================================
looking at code, even top one is active content font is 0px that's why
it doesn't show anything.
If I use firebug to rewrite code (set font-size to 10px) then content
is displayed.

Fist I used lated version of javascript(prototype.js, effects.js,
accordion.js) then I switched to old version to see make any different
but
I still see the same issue.

How can I fix this wired css setting?

or

If there is another accordion working fine with CakePHP??

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake-php@googlegroups.com
To unsubscribe from this group, send email to cake-php+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---