probleem met uitklapbaar javascriptmenu

[RMG888]

Als amateur ben ik bezig met een site aan het maken. Ik ben al een tijd aan het kl*ten met een menu maar ik kom er maar niet uit.
Ik wil dat het menu dit doet:
"Linkerkant menu: Klik op BMW en er klapt een menu daaronder uit met de type`s.
Klik op Mercedes en BMW klapt weer in, Menu onder mercedes klapt uit met de type`s
Wanneer op een type model wordt geklikt moet het menu in stand gehouden worden, waarbij aan de rechterkant een specificatie komt met plaatjes en info.

Tevens moeten de kopjes BMW en Mercedes links zijn naar een overzichtspagina van type modellen. waarbij het uitgeklapt modellen menu eronder in stand moet blijven."

Ik gebruik het onderstaande script maar deze doet helaas niet wat ik wil.
---------------------------------------
<script type="text/javascript">
function show_hide(id)
{
// vorige menu inklappen met check of er een vorig menu is
if(typeof prevmenu != "undefined") prevmenu.style.display = 'none';

// huidige submenu selecteren en openen
theElement = document.getElementById(id);
theElement.style.display = '';

// huidige als vorig submenu instellen
prevmenu = theElement;
}
</script><br>

<div class="merkmenu" onClick="show_hide('subhome')">BMW</div>
<div class="type" id="subhome" style="display:none">
<a href="#">3serie</a><br>
<br>
<a href="#">5serie</a><br>
<br>
</div>

<div class="merkmenu" onClick="show_hide('submenu2')">Mercedes</div>
<div class="type" id="subhome2" style="display:none">
<a href="#">300sl</a><br>
<br>
<a href="#">500sl</a><br>
<br>
</div>
------------------------------------
Uiteraard Google en tweakers search erop nageslagen maar tot nu toe nog niets kunnen achterhalen. Zit ik op de goede weg of zijn er alternatieven?

[XWB]

Like this?

JavaScript:

function menu(menuId) 
{ 
    var ul = document.getElementById('menu').getElementsByTagName('ul');
    
    for (var i = 0; i < ul.length; i++)
    {               
        ul[i].style.display = (ul[i].id == menuId) ? 'block' : 'none';
    }
} 

Cascading Stylesheet:

*
{
    margin: 0;
    padding: 0;         
}

#menu h4 
{ 
    cursor: pointer;
    width: 100px; 
    background-color: green; 
}           

#menu ul 
{ 
    display: none;
    color: #0066CC; 
    background-color: #FFFFFF;
    list-style: none;
} 

#menu ul li a
{ 
    color: #000000;
    text-decoration: none; 
}

HTML:

<div id="menu">
    <h4 onclick="menu('submenu_1')">BMW</h4>
    <ul id="submenu_1">
        <li><a href="">3serie</a></li>
        <li><a href="">5serie</a></li>
    </ul>
    <h4 onclick="menu('submenu_2')">Mercedes</h4>
    <ul id="submenu_2">
        <li><a href="">300sl</a></li>
        <li><a href="">500sl</a></li>
    </ul>
</div>

[RMG888]

dit bedoel ik ja. tnx man. Uiteraard direct uitgetest. Bij het aanklikken van zeg maar het hoofdkopje:BMW heb ik dus ook een link staan (overzicht van modellen). Deze link wordt geopend echter klapt het menu weer direct dicht. heb je nog suggesties?

[moozzuzz]

Wat ik gedaan heb in het verleden is in de url's steeds opgeven welk menu moet openstaan. Anders zal je inderdaad steeds een snel-open-snel-dicht-menu hebben. In elke pagina stond er dan een js'je dat aan de hand van de url het menu opnieuw opende:

Effect:
snel-open - dicht - open -menu

Het is wel niet zo handig, qua onderhoud en qua linken in je menu/overzicht/... maken, maar het werkt wel.

[ Voor 15% gewijzigd door moozzuzz op 04-08-2006 17:57 ]