Meerdere teksten verbergen/tonen

Status
Niet open voor verdere reacties.
C

coolegino

Gebruiker
Lid geworden
26 mei 2009
Berichten
31
Goedenavond,

Ik wil verschillende teksten verbergen op mijn website, en dat deze met 1 klik tevoorschijn komt en weer weg kan.

Ik gebruik momenteeel onderste:

HTML: 
<script type="text/javascript">
function showhide() {
   if (document.getElementById('hidden').style.display == 'block')
   {
      document.getElementById('hidden').style.display='none';
   }
   else
   {
      document.getElementById('hidden').style.display='block';
   }
}
</script>

en

HTML: 
hide / show : <a href="javascript:showhide()">show/hide</a>


Nou wil ik meerdere neerzetten, maar dat kan blijkbaar niet, aangezien die dan alleen de 1e opent. Iemand een oplossing er voor?
 
Je zou het zo kunnen doen:
HTML: 
<script type="text/javascript">
function showhide(id) {
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
      document.getElementById(id).style.display='block';
   }
}
</script>

Het tonen/verbergen gaat dan zo:
HTML: 
<div id="iets">verborgen tekst</div>
hide / show : <a href="javascript:showhide('iets')">show/hide</a>

<div id="iets_anders">verborgen tekst</div>
hide / show : <a href="javascript:showhide('iets_anders')">show/hide</a>

<div id="blaat">verborgen tekst</div>
hide / show : <a href="javascript:showhide('blaat')">show/hide</a>

Het gaat er dus om dat je de id van de tekst die je wilt/tonen verbergen meegeeft aan de functie.

Overigens heb ik dit niet getest, maar het zou zo moeten werken.
 
Dank.

Code werkt wel, echter, Alles blijft open staan, en gaat pas dicht als je er op klikt. Dit moet dus andersom zijn.
 
Om ze standaard te verbergen moet je 'style="display:none"' toevoegen aan de div-tag:
HTML: 
<div id="iets" style="diplay:none">verborgen tekst</div>
hide / show : <a href="javascript:showhide('iets')">show/hide</a>

Als je een los css-bestand gebruikt kan je het ook daarin zetten.
 
HTML: 
<html>

<head>
<script type="text/javascript">
function showhide(id) {
   if (document.getElementById(id).style.display == 'block')
   {
      document.getElementById(id).style.display='none';
   }
   else
   {
      document.getElementById(id).style.display='block';
   }
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>verborgen tekst 3</title>
</head>

<body>

<div id="iets" style="diplay:none">verborgen tekst 3</div>
hide / show : <a href="javascript:showhide('iets')">show/hide</a>
 
<div id="iets_anders" style="diplay:none">&nbsp;<p>verborgen tekst 2</div>
hide / show : <a href="javascript:showhide('iets_anders')">show/hide</a>
 
<div id="blaat" style="diplay:none">&nbsp;<p>verborgen tekst 1</div>
hide / show : <a href="javascript:showhide('blaat')">show/hide</a>

</body>

</html>

Klik hier voor de webpagina.

Blijven open staan.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan