You are not logged in.

  • Login

Klapp-Box?!

.morphy

Trainee

  • ".morphy" started this thread

Posts: 11

  • Send private message

1

Monday, December 10th 2007, 3:48pm

Klapp-Box?!

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:


Vielen vielen Dank!! :love:

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

2

Monday, December 10th 2007, 4:07pm

Hi,

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

HTML Code

 
1
2

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


JavaScript Code

 
1
2
3
4

function toggle() {
    var dom = document.getElementById('bla');
    alert(dom.style.display);
}
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

.morphy

Trainee

  • ".morphy" started this thread

Posts: 11

  • Send private message

3

Monday, December 10th 2007, 4:33pm

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

.morphy

Trainee

  • ".morphy" started this thread

Posts: 11

  • Send private message

5

Monday, December 10th 2007, 4:42pm

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

Administrator

Posts: 8,454

  • Send private message

6

Monday, December 10th 2007, 4:52pm

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

HTML Code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<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>
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

.morphy

Trainee

  • ".morphy" started this thread

Posts: 11

  • Send private message

7

Monday, December 10th 2007, 5:01pm

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

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: | und wenn er geklickt ist so:

Torben Brodt

Administrator

Posts: 8,454

  • Send private message

8

Monday, December 10th 2007, 5:04pm

einfach das Attribut src ändern.

Source code

 
1
2

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


Vor weiteren Fragen solltest du aber mal die JavaScript Kapitel bei SelfHTML gelesen haben,
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

wulfgang

Professional

Posts: 240

  • Send private message

9

Saturday, December 22nd 2007, 5:57pm

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

@.morphy wenn du

HTML Code

 
1

<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

Administrator

Posts: 8,454

  • Send private message

10

Saturday, December 22nd 2007, 6:06pm

funktionsvariable? Ne, wenn man das die JavaScript Zuweisung in ein JavaScript Tag packt, dann sollte der Code so schon funktionieren,
Latest blogs Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

wulfgang

Professional

Posts: 240

  • Send private message

11

Sunday, December 23rd 2007, 3:24pm

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

JavaScript Code

 
1
2

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


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

Similar threads

Tagging

Social bookmarks