Div-Box auf und zuklappen (HTML, CSS und Javascript)

[thread]2264[/thread]

Div-Box auf und zuklappen

Leser: 32

pktm

2005-07-15 19:56

User since
2003-08-07
2921 Artikel
BenutzerIn

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

User since
2004-05-14
231 Artikel
BenutzerIn
[default_avatar]

Hallo,
sollte passen:

Code: (dl )

<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

User since
2003-08-07
2921 Artikel
BenutzerIn

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

http://www.intergastro-service.de (mein erstes CMS :) )

esskar

2005-07-16 14:43

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

Code: (dl )

// Rest vom code
} 
div_change(1);
</script>

\n\n

pktm

2005-07-16 15:45

User since
2003-08-07
2921 Artikel
BenutzerIn

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

User since
2003-08-04
7321 Artikel
ModeratorIn

user image

du könnest bei der definition des divs schon das display auf 'none' setzen via css

Gast JSGreenhorn

2012-12-01 10:01

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

User since
2005-01-17
14533 Artikel
Admin1

Musst du halt die übergebenen Argumente der Funktion auslesen.
Ungestest:

Code: (dl )

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)

die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel

FIFO

2012-12-01 15:10

User since
2005-06-01
469 Artikel
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 )

<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

User since
2016-06-06
4 Artikel
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)

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