Font
[thread]2264[/thread]

Div-Box auf und zuklappen

Readers: 32


<< |< 1 2 >| >> 20 entries, 2 pages
pktm
 2005-07-15 19:56
#24524 #24524
User since
2003-08-07
2921 articles
BenutzerIn
[Homepage]
user image
Hallo!

Ich habe ein Formular unter dem ein Div-Element die Legende zu den Verwendeten Grafiken einrahmt.
Jetzt würde ich diese Legende aber gerne ausblenden und einen kleinen Link bereit stellen, mit dem man diese Box aufklappen kann.
Natürlich soll man sie auch gleich wieder einklappen können.

Ich habe zwar schon diverse Codes im Netz gefunden, aber die machen nicht exakt das was ich machen möchte.
Da geht die Box nämlich immer wieder von selbst weg, und meine soll dableiben bis der Benutzer auf "einklappen" drückt.

Klar was ich meine?

Grüße, pktm
http://www.intergastro-service.de (mein erstes CMS :) )
jemand
 2005-07-16 12:38
#24525 #24525
User since
2004-05-14
231 articles
BenutzerIn
[default_avatar]
Hallo,
sollte passen:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
<body>
<script language="JavaScript">
function div_change(strID){
document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none' ) ? 'block' : 'none';
document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none' ) ? 'block' : 'none';
document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none' ) ? 'block' : 'none';
} </script>
<div>Dies ist ein normales Div...</div><br><br>
<a href="javascript:/" onClick="div_change(1)">Div ein-/ausblenden</a><br><br>
<div id="1">Der Inhalt dieses Divs wird immer ein und ausgeblendet.</div>
</body>


Tested with Mozilla, Firefox, IE...

Viel Spaß damit
print uc 'i',chr(29*4).q+'s +.++($_=q-m-),++$_;
print chr for 116,$_[0],97,$_[0],98;
print 'ug,',chr(), scalar reverse qq?!erutaef a s'ti?;
pktm
 2005-07-16 14:02
#24526 #24526
User since
2003-08-07
2921 articles
BenutzerIn
[Homepage]
user image
Ja, herrlich, das geht ja.
Leider habe ich von JavaScript herzlich wenig Ahnung (mehr), aber was muss ich machen, damit die Box von vorne herein nicht da ist? Oder kann ich das einfach in den Style quetschen (wird nachher mal mit rumgespielt)?

EDIT: Im Opera 7.5 gehts auch.\n\n

<!--EDIT|pktm|1121508201-->
http://www.intergastro-service.de (mein erstes CMS :) )
esskar
 2005-07-16 14:43
#24527 #24527
User since
2003-08-04
7321 articles
ModeratorIn

user image
Code: (dl )
1
2
3
4
// Rest vom code
}
div_change(1);
</script>
\n\n

<!--EDIT|esskar|1121516099-->
pktm
 2005-07-16 15:45
#24528 #24528
User since
2003-08-07
2921 articles
BenutzerIn
[Homepage]
user image
Hm, klar, hätte man auch drauf können kommen.
Allerdings funktioniert es nicht ganz ohne Aufruf, habe es jetzt also in <body onload="... gesetzt. Geht das auch anders?
http://www.intergastro-service.de (mein erstes CMS :) )
esskar
 2005-07-16 16:16
#24529 #24529
User since
2003-08-04
7321 articles
ModeratorIn

user image
du könnest bei der definition des divs schon das display auf 'none' setzen via css
guest JSGreenhorn
 2012-12-01 10:01
#163810 #163810
Hallo
Danke für das greenhornfähige Script :-)))

Kleine Frage: Ich suche genau das was hier gemacht wird (inkl. display none im div), aber falls Javascript nicht vorhanden ist soll alles aufgeklappt und sichtbar sein.

Wenn im Body onload="div_change(1)" steht geht das. Jedoch kann ich da nur 1 ID angeben - hab aber mehrere...

Kann mir da jemand helfen?

Danke und Gruss :-)
Last edited: 2012-12-01 11:12:04 +0100 (CET)
GwenDragon
 2012-12-01 11:51
#163813 #163813
User since
2005-01-17
14741 articles
Admin1
[Homepage]
user image
Musst du halt die übergebenen Argumente der Funktion auslesen.
Ungestest:
Code: (dl )
1
2
3
4
5
6
7
8
function div_change(strID){
for (i=0;i<div_change.arguments.length;i++) {
var _id = div_change.arguments[i];
document.getElementById(_id).style.display = (document.getElementById(_id).style.display == 'none' ) ? 'block' : 'none';
document.getElementById(_id + "_shown").style.display = (document.getElementById(_id + "_shown").style.display == 'none' ) ? 'block' : 'none';
document.getElementById(_id + "_hidden").style.display = (document.getElementById(_id + "_hidden").style.display == 'none' ) ? 'block' : 'none';
}
}

//EDIT: Funktionsname bei bei arguments vergessen
Last edited: 2012-12-01 11:54:52 +0100 (CET)
FIFO
 2012-12-01 15:10
#163821 #163821
User since
2005-06-01
469 articles
BenutzerIn

user image
Deine Variante funktioniert (zumindest bei mir) nicht mit mehreren DIVs. Lässt man die _shown/_hidden-Zuweisungen weg, dann funktionierts:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<script language="JavaScript">
function div_change() {
for (i = 0; i < div_change.arguments.length; i++) {
var _id = div_change.arguments[i];
document.getElementById(_id).style.display = (document.getElementById(_id).style.display == 'none' ) ? 'block' : 'none';
}
}
</script>
</head>
<body>
<div>Dies ist ein normales Div...</div><br><br>
<a href="javascript:/" onClick="div_change(1,2)">Div ein-/ausblenden</a><br><br>
<div id="1" style="display: none">DIV 1, Default: Versteckt.</div>
<div id="2">DIV 2, Default: Sichtbar.</div>
</body>
</html>
Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it? -- Brian Kernighan: "The Elements of Programming Style"
Violence
 2016-06-06 10:14
#184887 #184887
User since
2016-06-06
4 articles
BenutzerIn
[default_avatar]
Hallo !
Das Thema ist zwar schon über 10 Jahre alt, bin aber per google hierdrauf gestoßen.
Das Script ist echt Gut. Aber, wie kann ich das einstellen, das der Inhalt nicht ausgeklappt angezeigt wird sobald ich die seite öffne?

Bei ca 50 div's wird das ganze unübersichtlich, wenn alles direkt beim öffnen der Seite ausgeklappt wird.

Danke vorab,
Violence
Last edited: 2016-06-06 10:25:15 +0200 (CEST)
<< |< 1 2 >| >> 20 entries, 2 pages



View all threads created 2005-07-15 19:56.