Frage stellen

Beim Überschrift anklicken soll ein erklärender Text erscheinen

1.5k Aufrufe
Gefragt in Webseiten HTML von
Hi zusammen,

auf meiner Hp hab ich verschiedene Leistungen ausgewiesen.
Ich hätte nun gerne, dass wenn man diese anklickt direkt untendrunter einige Zeilen der Erläuterung auftauchen.
Ich arbeite mit Dreamweaver.

Kann mir jemand helfen?
Vielen Dank schonmal

1 Antwort

0 Punkte
Beantwortet von kicia Mitglied (939 Punkte)
eine schnelle lösung wäre:

<html>
<head>
<style type="text/css">
h1 { cursor:pointer; }
span { background-color:#ffff99; display:none; cursor:pointer; }
</style>
</head>

<body>
<h1 onclick="this.nextSibling.style.display='inline'">Überschrift1</h1><span onclick="this.style.display='none'">informationen</span>
<h1 onclick="this.nextSibling.style.display='inline'">Überschrift2</h1><span onclick="this.style.display='none'">informationen</span>
<h1 onclick="this.nextSibling.style.display='inline'">Überschrift3</h1><span onclick="this.style.display='none'">informationen</span>
</body>
</html>

ein bischen besser vielleicht:

<html>
<head>
<style type="text/css">
h1 { cursor:pointer; }
span.info { background-color:#ffff99; display:none; cursor:pointer; }
</style>
<script type="text/javascript">
function init()
{
var elms = document.getElementsByTagName("h1");
for( i = 0; i < elms.length; i++ )
{
elms[i].onclick = function() { this.nextSibling.style.display='inline'; };
elms[i].nextSibling.onclick = function() { this.style.display='none'; };
}
}
</script>
</head>

<body onLoad="init()">
<h1>Überschrift1</h1><span class="info">informationen</span>
<h1>Überschrift2</h1><span class="info">informationen</span>
<h1>Überschrift3</h1><span class="info">informationen</span>
</body>
</html>
...