Klapp-Box?!

.morphy · 10. Dezember 2007, 15:48

Hi,

Ich würde gerne mit javascript oder CSS eine box erstellen die man per klick ausklappen bzw. einklappen kann.
Wie hier auf diesem Beispiel:
[Blockierte Grafik: http://img134.imageshack.us/img134/995/problemdy3.jpg]

Vielen vielen Dank!! :love:

Torben Brodt · 10. Dezember 2007, 16:07

Hi,

wie vermutet geht das mit JavaScript und CSS.
Du musst objekt.style.display zwischen "block" und "none" toggeln

Quellcode

<a href="#" onclick="toggle('bla')">toggle</a>
<div id="bla">inhalt</div>

Quellcode

function toggle() {
var dom = document.getElementById('bla');
alert(dom.style.display);
}

.morphy · 10. Dezember 2007, 16:33

Danke und wie bekomme ich dort ein bild hin, also dort wo der text steht!

Torben Brodt · 10. Dezember 2007, 16:38

fragst du jetzt wie du ein Bild in HTML einbindest?
de.selfhtml.org/html/grafiken/einbinden.htm

.morphy · 10. Dezember 2007, 16:42

Nein, also das geht nicht wenn ich jetzt einfach

<a href="#" onclick="toggle('bla')">toggle</a>

das bla gegen ein

<img src="images/bla.jpg" alt="" />

ersetze.

Torben Brodt · 10. Dezember 2007, 16:52

Willst du ein Bild als Button? Dann einfach den Text toggle ersetzen.
Willst du ein Bild als Inhalt? Dann den Text inhalt ersetzen.

Quellcode

<html>
<head>
<script type="text/javascript">
//<![CDATA[
function toggle() {
var dom = document.getElementById('bla');
dom.style.display = dom.style.display == 'none' ? 'block' : 'none';
}
//]]>
</script>
<style type="text/css">
#box {
width:200px;
}
#box a {
display:block;
background-color:#afafaf;
}
</style>
</head>
<body>
<div id="box">
<a href="#" onclick="toggle('bla')">toggle</a>
<div id="bla">inhalt</div>
<a href="#" onclick="toggle('bla2')">toggle</a>
<div id="bla2">inhalt</div>
</div>
</body>
</html>

Alles anzeigen

.morphy · 10. Dezember 2007, 17:01

Ahhh jetzt klappt es vielen dank...
doch nun habe ich noch 2 fragen

Also
1. Wie bekomme ich es hin das es erst nicht da ist und dann wenn man klickt erst kommt (also andersrum als nun)
2. Wenn ich nun den button also normal so: [Blockierte Grafik: http://img253.imageshack.us/img253/7725/offsx9.jpg] | und wenn er geklickt ist so: [Blockierte Grafik: http://img134.imageshack.us/img134/5940/onzi5.jpg]

Torben Brodt · 10. Dezember 2007, 17:04

einfach das Attribut src ändern.

Quellcode

<img id="bla" ... />
document.getElementById('bla').src = 'neu';

Vor weiteren Fragen solltest du aber mal die JavaScript Kapitel bei SelfHTML gelesen haben,

wulfgang · 22. Dezember 2007, 17:57

@d0nUt fehlt in deiner javascript-funktion nicht die funktionsvariable?

@.morphy wenn du

Quellcode

<div id="bla" style="display:none;">Verborgener Inhalt</div>

schreibst, wird der Inhalt bei Seitenaufruf standardmäßig nicht angezeigt - erst, wenn der display-Wert durch die Javascript-Funktion geändert wurde.

Torben Brodt · 22. Dezember 2007, 18:06

funktionsvariable? Ne, wenn man das die JavaScript Zuweisung in ein JavaScript Tag packt, dann sollte der Code so schon funktionieren,

wulfgang · 23. Dezember 2007, 15:24

hm ich hätte die zwei zeilen jetzt so geschrieben:

Quellcode

function toggle(funktionsvariable) {
var dom = document.getElementById(funktionsvariable);

denn ansonsten bezieht er sich ja immer auf "bla".

Klapp-Box?!

Klapp-Box?!

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags