Folde ud tabel i JS

Hej roz, er det noget i denne her stil du mener?

<a onClick="document.getElementById('tabelNavn').style.display='block';">Fold tabellen ud</a>

<table id="tabelNavn">

<tr>
<td>Menupunkt 1</td>
</tr>

<tr>
<td>Menupunkt 2</td>
</tr>

</table>

<ole>

Er det rækker eller kolonner, du vil kunne folde ind/ud?

/mvh
</bole>

madeindk -  Ja præcis :) kan du lave det til mig? Altså bare et eksempel hvor jeg kan smide min egen kode ind. Skal være så den både kan folde ud og skjule med samme knap.

olebole - Rækker. Altså nedad ;) heh

madeindk - Og også ændre teksten på "knappen" eller linket :)

Du kan i princippet allerede putte dine ting i menuen nu. Hvad er det præcis du søger? Kan sagtens lave til dig så den folder samme på samme link :-)

Ja det ved jeg. Mangler blot så den kan folde sammen + ændre teksten på linket der folder den sammen.

<script type="text/javascript">
   
    function view( targetId ){
        if (document.getElementById){
                target = document.getElementById( targetId );
                  if (target.style.display == "none"){
                      target.style.display = "";
                  } else {
                      target.style.display = "";
                  }
            }
            }
           
      function hide( targetId ){
        if (document.getElementById){
                target = document.getElementById( targetId );
                  if (target.style.display == ""){
                      target.style.display = "none";
                  } else {
                      target.style.display = "none";
                  }
            }
            }
           
</script>

<div id="viserTabel" style="display:;"><a style="cursor:pointer;" onClick="hide('tabelNavn'); hide('viserTabel'); view('skjulerTabel');">Skjul tabellen</a></div>

<div id="skjulerTabel" style="display:none;"><a style="cursor:pointer;" onClick="view('tabelNavn'); view('viserTabel'); hide('skjulerTabel');">Vis tabellen</a></div>

<table id="tabelNavn">

<tr>
<td>Menupunkt 1</td>
</tr>

<tr>
<td>Menupunkt 2</td>
</tr>

</table>

Virker perfekt :) Smid et svar så får du point.

Nå lukker...

Jeg har gjort brug af ovenstående JS som fungerer fint, lige bortset fra at tabellen er foldet ud som default, hvilket jeg ikke ønsker. Kan nogen hjælpe mig med hvordan at man får den til at være lukket som udgangspunkt??

Meget enkelt egentlig. Dette skulle kunne klare det for dig:

<div id="viserTabel" style="display:none;"><a style="cursor:pointer;" onClick="hide('tabelNavn'); hide('viserTabel'); view('skjulerTabel');">Skjul tabellen</a></div>

<div id="skjulerTabel" style="display:;"><a style="cursor:pointer;" onClick="view('tabelNavn'); view('viserTabel'); hide('skjulerTabel');">Vis tabellen</a></div>

<table id="tabelNavn" style="display:none;">

<tr>
<td>Menupunkt 1</td>
</tr>

<tr>
<td>Menupunkt 2</td>
</tr>

</table>

Tak. Jeg fik den del til at virke. Nu er der opstået et andet problem. Jeg bruger dette Script til at lave en lang række af Vis/skjul detaljer se:

http://sfah.intramediaserver.dk/Default.aspx?pageid=22

Jeg har brugt det samme script hver gang, og bare omdøbt TabelNavn så det er unikt til hvert titel. DVS:

<div id="viserTabel" style="display:none;"><a style="cursor:pointer;" onClick="hide('tabelNavn40'); hide('viserTabel'); view('skjulerTabel');">Skjul tabellen</a></div>

<div id="skjulerTabel" style="display:;"><a style="cursor:pointer;" onClick="view('tabelNavn40'); view('viserTabel'); hide('skjulerTabel');">Vis tabellen</a></div>

<table id="tabelNavn40" style="display:none;">

--
Problemet er at alle åbner fint, men at de ikke vil lukke igen. Det ser desuden ud som om den første Vis/Skjul detaljer bliver påvirket når man forsøger at lukke en af de andre. Er der nogen der ved hvad jeg gør galt?

Du skal jo også have et unikt ID til hver af Vis/Skjul knapperne:
<div id="viserTabel" <----------- Her skal id'et laves unikt
style="display:none;"><a style="cursor:pointer;"
onClick="hide('tabelNavn40'); <---- HER  hide('viserTabel'); <---- OH HER OS

view('skjulerTabel');"> <---- OG HER SEFØLI
Skjul tabellen</a></div>

Og det skal den anden knap selvfølgelig også.