michaelsinterface.de

Home
» Tutorials
» show.hide

show.hide

Die CSS-Eigenschaft visibility regelt die Anzeige bzw. Nichtanzeige von HTML-Elementen; mit dem Wert visible ist das Element sichtbar und mit hidden wird das Element versteckt.

Mit der hier vorgestellten Script-Funktion ShowHide können HTML-Elemente (in diesem Beispiel: DIV-Tags) in einem Dokument angezeigt und wieder versteckt werden.

onclick: show.hide.box

onmouseover: show.hide.box

Box

JavaScript

Der Script-Code wird im Dokument-Header notiert:

function ShowHide(id) {
obj = document.getElementsByTagName("div");
if (obj[id].style.visibility == 'visible'){
obj[id].style.visibility = 'hidden';
}
else {
obj[id].style.visibility = 'visible';
}
}

CSS

Für das Element werden in dem ID-Selektor #boxDiv die gewünschten CSS-Formatierungen - insbesondere die visibility-Eigenschaft - festgelegt:

#boxDiv /* DEMO-Box */ {
visibility: hidden;
margin-top: 20px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #000;
background-color: #cacaca;
}

Funktionsaufruf

Der Funktionsaufruf kann über den onclick- oder onmouseover / onmouseout-Eventhandler implementiert werden:

Quelltext

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::show.hide:::</title>

<script type="text/javascript">

</script>

<style type="text/css">

#boxDiv /* DEMO-Box */ {
visibility: hidden;
margin-top: 20px;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
color: #000;
background-color: #cacaca;
}

</style>

</head>
<body>

onclick: <a href="#" onclick="ShowHide('boxDiv')">show.hide.box</a><br>
onmouseover: <a href="#" onmouseover="ShowHide('boxDiv')" onmouseout="ShowHide('boxDiv')">show.hide.box</a>
<div id="boxDiv">Box</div>

</body>
</html>