nicht angemeldet
Hi,Verwende jedes beliebige Element mit onclick-event, und greife mit JS auf die style-Eigenschaften Deiner Wahl zu, beispielsweise:
Oder so, stimmt.
Ich habe in der Zwischenzeit an einem Lösungsansatz gebastelt, aber ich verstehe nicht, warum der nicht den gewünschten Effekt erziehlt.
Kann mir dabei einer einen Tip geben?
Grüße
Frank
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>
<style type="text/css">
body { color:black; background-color:white; }
#container { border:1px solid red; }
#links { float:left; width:20em; border-bottom:1px dotted green; padding:1em; }
#rechts { padding:1em; border-left:22em solid #f0f0f0; background-color:white; }
p { margin:0; }
</style>
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var isShow = false;
$(document).ready(function(){ // Prüft, ob das Dokument geladen ist
$("button#openEx1").click(function(event){ // Bei Klick auf button#openEx1
if (isShow == false) {
$('div#links').css({ float:left; width:20em; border-bottom:1px dotted green; padding:1em; });
$('div#rechts').css({ padding:1em; border-left:22em solid #f0f0f0; background-color:white; });
isShow = true;
} else {
$('div#links').css({ float:left; width:10em; border-bottom:1px dotted green; padding:1em; });
$('div#rechts').css({ padding:1em; border-left:12em solid #f0f0f0; background-color:white; });
isShow = false;
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="links">
<button id="openEx1">+ / -</button>
<p>
Lorem ipsum ... usw.</p>
</div>
<div id="rechts">
<p>Sed tincidunt ... usw.</p>
</div>
</div>
</body>
</html>
Gunnar Bittersmann