Checkbox aan = bepaalde tekst zichtbaar

[Tsjibbe]

Hallo forumleden,

Graag zou ik een html pagina maken waarbij ik bepaalde tekst zichtbaar/onzichtbaar kan maken dmv aan en uitzetten van een checkbox.

Ik heb al druk gezocht via google, maar blijkbaar gebruik ik niet de juiste zoektermen.

Zou iemand mij kunnen vertellen of mijn wens mogelijk is met html? En zo ja, zou je me dan op het juiste spoor kunnen zetten?

Alvast bedankt!

 

[Tha Devil]

Het javascript uit dit bericht van Egel gebruiken.

Vervolgens in plaats van

<a href="#" onclick="toggle('vakje')">vakje uit / aan</a><br> 
<span id="vakje">Deze tekst verdwijnt en verschijnt.<br></span>

dit gebruiken

<input type="checkbox" onselect="toggle('vakje')" />
<div id="vakje">Deze tekst verdwijnt en verschijnt.</div>

 

[Egel]

Met een onselect schakeld het ook als je via tab erop komt.


Dit kijkt of de checkbox gechecked is, en geeft dan een element wel of niet weer:

<script type="text/javascript">
 // Egel 070428 ;)
 function toggle(checkbox,id) {
  var id = document.getElementById(id);
  id.style.display = (checkbox.checked ? '' : 'none');
  };
</script>

<input type="checkbox" onclick="toggle(this,'div1');">
<div id="div1" style="display: none;">Inhoud van div 1.</div>

<input type="checkbox" onclick="toggle(this,'span2');">
<span id="span2" style="display: none;">Inhoud van span 2.</span>

<input type="checkbox" onclick="toggle(this,'img3');">
<img id="img3" style="display: none;" src="#" />

<input type="checkbox" onclick="toggle(this,'a4');">
<a id="a4" style="display: none;" href="http://www.helpmij.nl/">www.helpmij.nl</a>

<input type="checkbox" onclick="toggle(this,'div5');" checked>
<div id="div5">Deze div5 is al meteen zichtbaar.</div>

Voor een stuk tekst is een div (voorbeeld 1 en 5) waarschijnlijk het beste.


Vr.Gr. Egel.

 

[Tsjibbe]

Tha Devil en Egel, bedankt voor de hulp. Het stuk van Egel werkt perfect voor tekst.

Misschien ben ik veeleisend... maar ik heb in mijn pagina ook een stuk waarbij de tekst is opgemaakt met tabellen. Hierbij lijkt het togglen van de opmaak niet te werken, terwijl de tekst wel aan en uit gaat.

Is dit op te lossen? Of wil ik te veel?

 

[Tha Devil]

Dan moet je de tabel tussen de div/span zetten en niet de text

 

[Egel]

Zo kun je een tabel aan- en uitzetten:

<input type="checkbox" onclick="toggle(this,'table6');">
<table id="table6" style="display: none;">
 <tr>
  <td>Linksboven</td><td>Rechtsboven</td>
 </tr><tr>
  <td>Linksonder</td><td>Rechtsonder</td>
 </tr>
</table>

Als het gaat om een groter stuk waarin een tabel staat dan zet je het geheel idd tussen div/span.


Vr.Gr. Egel.

 

[Tsjibbe]

Geweldig, erg bedankt voor jullie hulp:thumb: