Text soll nach Klick auf Wort erscheinen

K

kakapopo

Mitglied
Hallo,

ich möchte gern Folgendes: Ich hab da ca. 10 Links untereinander geschrieben. Wenn man auf eins klickt, soll drunter ein Text erscheinen. Wenn ich wieder draufklicke, soll er wieder verschwinden. Dabei sollen die anderen Links mitverschoben werden.

Kennt ihr da den Code?

Danke und mfg
 
Um die Ebenen beim Klicken eines Links ein- und ausblenden zu können, benötigst du Javascript, weshalb ich das Thema auch in das entsprechende Board verschiebe.

Und hier ein Lösungsbeispiel:

Code: 
<!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></title>

<script type="text/javascript">
<!--
var maincat = new Array();
maincat[0] = 'cat1';
maincat[1] = 'cat2';
maincat[2] = 'cat3';
// usw.

function ShowHide(divid)
{
        if(document.getElementById(divid).style.display=="none")
        {
                for(i=0;i<maincat.length;i++)
                {
                        document.getElementById(maincat[i]).style.display="none";
                }

                document.getElementById(divid).style.display="block";
        }
        else
        {
                document.getElementById(divid).style.display="none";
        }
}
//-->
</script>

<style type="text/css">
<!--
ul, li {
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<ul>
    <li>
        <a href="#" onclick="ShowHide('cat1')">Link 1</a>
        <div id="cat1" style="display:none">Text zu Link 1</div>
    </li>
    <li>
        <a href="#" onclick="ShowHide('cat2')">Link 2</a>
        <div id="cat2" style="display:none">Text zu Link 2</div>
    </li>
    <li>
        <a href="#" onclick="ShowHide('cat3')">Link 3</a>
        <div id="cat3" style="display:none">Text zu Link 3</div>
    </li>
</ul>

</body>
</html>
 
kakapopo hat gesagt.:
Wenn man auf eins klickt, soll drunter ein Text erscheinen. Wenn ich wieder draufklicke, soll er wieder verschwinden.
Zum Vergrößern anklicken....

@Stoffelchen: Stu Nicholls' "CSS-Dropdown-Menüs" funktionieren "lediglich" in Verbindung mit der :hover-Pseudoklasse, also beim Überfahren der Links; mit Anklicken ist da nichts ;)
 
*hmpf* ... n versuch wars ja wert ^^ ... kann ja sein, dass sich kakapopo umentscheidet und nicht mehr klicken, sondern nur noch hovern will xD

aber recht haste ;)
 
Hy,

ich weiß wie ein Hovermenü funktioniert, aber das ist nicht das was ich meine. Ich werd mal die obige Lösung ausprobieren, wenn ich Zeit habe.

Danke
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück