Vis eller skjul et element ved brug af javascript

- Skrevet af HotBoy77

Hej, her vil jeg fortælle jer hvordan i kan lave en simpel funktion til at skjule et element på en hjemmeside ved hjælp af et hyperlink!

Først skal vi have skrevet funktionen til at skjule elementet ind i headeren:
<script type="text/javascript" language="javascript"> 
  function toggleElm(id){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
  }
</script> 

Her bruger vi et id til at finde elementet.

Nu skal vi have skrevet det ind i html koden:
<a href="javascript:;" onmousedown="toggleElm('Elm1');">Equation AddIn</a> 
	<div id="Elm1" style="display:none"> 
		<h2>Bam Div!</h2> 
	</div>

Når du skriver funktionen onmousedown="toggleElm('Elm1');" skal du sætte Elm1 til det id du har givet dit element.
Se koden i brug her!

- Deltag i community projektet hvor vi laver en simpel html template i fællesskab!

Denne artikel er læst 3129 gang(e).
Se flere artikler i kategorien HTML her.

 

Kommentarer til artiklen

Webmaster - [Redigér] 03/04 - 2011 14:39
Det her er også en god artikel, selvom det er så simpelt. Det kan jeg sku godt li ;-)

Husk at man kan også udnytte denne funktion på andre ting en hyperlinks, f.eks. knapper:

<input type="button" value="Vis den skjulte besked!" onclick="toggleElm('Elm1')">
  


Mvh Andreas Lysdal

 

Skriv en kommentar

Klik for at indsætte: Fed | Kursiv | Link | Billede | Citat | Liste | Kode