Slashdot accordion sudden expand

[myrok24]

Hi there, is used the slashot accordion menu as it works pretty fine.
Except, sometimes when i navigate in my page, the whole menu expands first before collapsing. (wich was set).

index: (all closed)


<script type="text/javascript">
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.speed = 4;
myMenu.oneSmOnly = true;
myMenu.remember = true;
myMenu.init();
var firstSubmenu = myMenu.submenus[1];
myMenu.collapseAll();
};
</script>


and on other page: (one submeu open)


<script type="text/javascript">
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.speed = 4;
myMenu.oneSmOnly = true;
myMenu.remember = true;
myMenu.init();
};
</script>


live example:
http://blikvoer.com/temp/samtest/index.php
try open a menu and press refresh couple of times, ad youll see..

thx for any help in advance!

[codeexploiter]

Follow the two steps and see the loading of menu after these modifications

1. The following is the HTML markup that you use for constructing the menu


<div id="my_menu" class="sdmenu">
<div>
<span id="knop1"></span>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Boeken">Boeken</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Campagne">Campagne</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Internet">Internet</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Lespaketten">Lespaketten</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Spellen">Spellen</a>
</li>
</ul>
</div>
<div>
<span id="knop2"></span>
<ul>
<li class="submenu">
<a class="submenu" href="#">0-4 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">4-6 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">7-8 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">9-10 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">11-12 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">12-16 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">19-24 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">Scholen</a>
</li>
<li class="submenu">
<a class="submenu" href="#">Gezin/ouders</a>
</li>
</ul>
</div>
</div>


Change the above code in the following manner; check the highlighted section



<div id="my_menu" class="sdmenu">
<div class="collapsed">
<span id="knop1"></span>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Boeken">Boeken</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Campagne">Campagne</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Internet">Internet</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Lespaketten">Lespaketten</a>
</li>
</ul>
<ul class="submenu">
<li class="submenu">
<a class="submenu" href="index.php?pagina=portfolio&category=Spellen">Spellen</a>
</li>
</ul>
</div>
<div class="collapsed">
<span id="knop2"></span>
<ul>
<li class="submenu">
<a class="submenu" href="#">0-4 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">4-6 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">7-8 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">9-10 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">11-12 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">12-16 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">19-24 jaar</a>
</li>
<li class="submenu">
<a class="submenu" href="#">Scholen</a>
</li>
<li class="submenu">
<a class="submenu" href="#">Gezin/ouders</a>
</li>
</ul>
</div>
</div>


2. Change the window.onload's function call like the following manner from the current state:


<script type="text/javascript">
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.speed = 4;
myMenu.oneSmOnly = true;
myMenu.remember = true;
myMenu.init();
var firstSubmenu = myMenu.submenus[1];
};
</script>

We remove the collapseAll function call.

Hope this helps.

[myrok24]

HI there, your code works perfectly.
BUt there still one thing: when a menu is expanded and I navigate within this page. (page&id=..) the menu list collapses and expands sometimes. So it is not steady expanded. If you know what i mean..

Any idea?
thnx