Hide/show div

[frederic202]

Mijn vraag is misschien heel basis, maar ik kom er toch niet aan uit.

Het is de bedoeling dat ik één knop gebruik om een div te hidden en showen.

Ik gebruik deze korte javascript:

<script type="text/javascript">

function toonGegevens(){

var element= document.getElementById('gegevens');

element.style.visibility = (element.style.visibility == "hidden") ? "visible" : "hidden";

}

De div heeft uiteraard als id 'gegevens' meegekregen?

Verder staat in de css de visibility van de div op hidden, zodat bij het openen van de pagina de div niet te zien is.

Het script werkt op één detail na. De eerste maal moet ik 2 keer klikken om de div te laten verschijnen. Hoe kan dit. Als het één keer verschenen is dan werkt het systeem wel zoals het zou moeten.

Mvg,

Frederic

[bergkid]

word er ergens al een waarde aan je script gegeven waar mee hij moet beginnen?

dus word er ergens standaard gezegd dat hij op hidden moet staan of juist op visible?

[frederic202]

In het script niet nee. Maar in de css staat de div wel ingesteld op hidden van bij de start

[JorenWillems]

Ik zou het volgende doen:

JAVASCRIPT:

function showhide(){  
  var txt = document.getElementById('knopid');  
  if (knop.innerText == 'Show'){    
     document.getElementById('divid').className="hide";    
     txt.innerText = "Hide";  
  }else{    
     document.getElementById('divid').className="show";    
     txt.innerText = "Show";  
  }
}

CSS:

.show{display:block;}
.hide{display:none;}

HTML:

<div id="divid">Blabla</div>
<div><input type="button" value="Show" id="knopid" onclick="showhide()" /></div>

*Dit werkt niet voor Firefox. Hiervoor moet je ipv innerText textContent gebruiken.

30 november 2011 aangepast door JorenWillems