nicht angemeldet
hallo,
ich bin gerade dabei eine webseite komplett in css zu realisieren.
jetzt ist da eine unterseite, auf der ca. 10 headlines als grafiken stehen, die bei jeweiligem klick einen individuellen text anzeigen sollen. alles headline grafiken stehen untereinander, der text soll dann immer unter der geklickten headline sichbar sein, d.h. die anderen headlines schieben sich nach unten. soweit kein problem, allerdings bekomme ich es nicht hin, dass sich die aktiven headlines beim klick auf eine neue wieder "einklappen", man soll nämlich nur immer einen text sehen können.
hier mal ein beispiel:
/*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" language="javascript">
function addEvent(obj, evType, fn, useCapture){
if (obj.addEventListener){
obj.addEventListener(evType, fn, useCapture);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be attached");
}
}
function togglediv(e)
{
if (!e) return;
var container = document.getElementById(e);
var status = container.style.display;
if (status == '')
{
container.style.display = 'block';
} else {
container.style.display = '';
}
}
function addListeners()
{
if(!document.getElementById) return;
var toggleButton = document.getElementById('togglebutton');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv') }, false);
var toggleButton = document.getElementById('togglebutton1');
addEvent(toggleButton,'click', function(event) { togglediv('togglediv1') }, false);
}
addEvent(window, 'load', addListeners, false);
</script>
</head>
<style type="text/css" media="screen">
/* <![CDATA[ */
body {
font: 0.7em/160% "Lucida Grande", Verdana, Helvetica, sans-serif;
}
#togglediv {
background: #F9EE98;
border: 1px solid #D9C589;
display: none;
padding: 0.5em 1em;
}
#togglediv1 {
background: #F9EE98;
border: 1px solid #D9C589;
display: none;
padding: 0.5em 1em;
}
/* ]]> */
</style>
<body>
<p><a href="#" id="togglebutton">headline 1</a></p>
<div id="togglediv">
text des divs
</div>
<p><a href="#" id="togglebutton1">headline 2</a></p>
<div id="togglediv1">
text des divs
</div>
</body>
</html>
*/