Text nach Klick aufklappen lassen - nur CSS

denny125

Grünschnabel
Hallo,
ich habe nun einen kompletten Tag damit verbracht eine Lösung zu finden, habe aber jetzt aufgegeben.

Habe folgenden Quellcode:
Code:
<head>
<!-- Text aufklappen -->
<style type="text/css" media="screen,projection">
/*<![CDATA[*/ 
*			{ 
        	margin:  0; 
        	padding: 0; 
			} 
div			{
			border:  0px solid #000000;
			padding: 1em .2em;
			 
			font-size: .8em;
			}
p			{
			margin: .2em;
			background-color: #EEEEEE;
			}
a			{
			color: #000000;
			}
a:focus,
a:active	{
			background-color: #ffffff;
			}	
a span		{
			display: none;
			}
a:focus span,
a:active span,
 
span
			{
			display: block;
			border:  0 none;
			padding: 1em;
			text-decoration: none;
			background-color: #ffffff;
			}
		/*]]>*/ 
</style> 
<!-- Text aufklappen zu Ende -->
</head>

<body>
<div><b>lala</b>
	<a href="#block"><font color="#788900">mehr...</font>
		<span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</span>
	</a>
	</p> 
</div>
</body>

Soweit funktioniert es, aber mit einem kleinen Haken: Der Text wird nur solange angezeigt, wie man mit der Mouse auf "mehr..." klickt. Die "a:hover span" - variante ist so naja..

Kann mir jemand helfen? Was muss ich machen, damit der Text nach dem Klick stehen bleibt? Und evtl. nach einem neuen Klick wieder verschwindet?

Sollte es nicht gehen, gibt es nur eine JavaScript-Lösung? Oder wie komme ich an mein Ziel?

Vielen Dank******
 
Zurück