DIV-Box ein- und ausklappen

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich möchte gerne mehrere Boxen die sich ein und ausklappen lassen.

Gefunden habe ich folgendes: http://www.askingbox.de/tutorial/jquery-ein-div-aufklappen-andere-divs-zuklappen

Leider bekomme ich es nicht sauber in eine horizontale Linie.

Ungefähr so:

Test Test2 Test3
->Test1 ->Test2 ->Test3
->Test1 ->Test2 ->Test3

Kann mir da jemand helfen? Gerne auch ohne JS wenn es möglich ist.

2

Erstmal vielen Dank!

Leider klappt keins der 3 Möglichkeiten, sie sind ausgeklappt und lassen sich nicht einklappen.

Bräuchte es Horizontal. (Genau genommen eine ausklappbare Navigation, soll aber ausgeklappt bleiben)

3

Soweit klappt es nun, danke!

Habe noch 2 Fragen:

  1. Ist es möglich, dass beim aufrufen der Seite alle eingeklappt sind?
  2. Wenn ich ein aufrufe, wie verstecke ich den Text wieder mit klick?
4

Soweit hat alles geklappt, vielen Dank!

Wo genau muss ich jetzt einstellen, dass es breite 100% hat?
Ist es sehr schwierig ein Hintergrundbild nur für „Ersten Container öffnen“, „Zweiten Container öffnen“ und „Dritten Container öffnen“ einzustellen?

Kannst du sowas?

5

Kannst du dir die letzen beiden Punkte nochmal anschauen?

Brauchst meinen überarbeiteten Code?

6

Genau.

<div class="wrcopen2">
      <div class="innercopen">
       <input id="copen1" type="checkbox" name="radio1" /><label for="copen1"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;Name 1</label>
       <div class="c">
        <a href="#">
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;1<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;3<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;4<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;5<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;6<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;7<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;8<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;9<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;10<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;11<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;12
        </a>
       </div>
      </div>
      <div class="innercopen">
       <input id="copen2" type="checkbox" name="radio1" /><label for="copen2"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2</label>
       <div class="c">
        <a href="#">
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;1<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;3<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;4<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;5
        </a>
       </div>
      </div>
      <div class="innercopen">
       <input id="copen3" type="checkbox" name="radio1" /><label for="copen3"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;3</label>
       <div class="c">
        <a href="#">
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;1<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;3
        </a>
       </div>
      </div>
      <div class="innercopen">
       <input id="copen4" type="checkbox" name="radio1" /><label for="copen4"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;4</label>
       <div class="c">
        <a href="#">
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;1<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2
        </a>
       </div>
      </div>
      <div class="innercopen">
       <input id="copen5" type="checkbox" name="radio1" /><label for="copen5"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;5</label>
       <div class="c">
        <a href="#">
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;1<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;2<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;3<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;4<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;5<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;6<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;7<br />
         <img alt="->" src="./Bilder/Pfeil.gif"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;8
        </a>
       </div>
      </div>
      <div class="innercopen">
       <input id="copen6" type="checkbox" name="radio1" /><label for="copen6"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;6</label>
       <div class="c">
        In Arbeit
       </div>
      </div>
      <div class="innercopen">
       <input id="copen7" type="checkbox" name="radio1" /><label for="copen7"><img alt="->" src="./Bilder/Pfeil.gif">&nbsp;7</label>
       <div class="c">
        In Arbeit
       </div>
      </div>
     </div>
7

Ja passen, anzugucken unter www.Brause-Junior.net/Neu

->[ATTACH]4659[/ATTACH]<-

8

Am besten in den Bereich?

Irgendwie klappt es nicht bei mir…

9

Perfekt, vielen Dank!

10

Leider ist mein Wissen über CSS nicht das beste, sodass ich es nicht horionzontal bekomme…

11

Habe es eingefügt, alles ist nun durcheinander…

12

Komisch sehe garkeine… Werde es mal abschreiben und mich melden…

13

Habe es gesäubert. Ist immer noch verschoben aber anders

14

Da ist der alte Code mit drin, den ich per ausgeklammert habe. Habe den ausgeklammerten Text entfernt.

Den link ändern?

15

Danke schön!
Die Größe passe ich selber an, denke werde es schaffen. :wink:

16

Soweit habe ich alles hinbekommen außer 3 Sachen:

1 Die Weite stimmt nicht mehr, es soll Mittig sein.
2 Da sind so komische Bildstückchen bei „Advanced-Bereich“ und neuste Beiträge.
3 Wo stelle ich die höhe ein?

17
  1. Ich werde es gleich testen.
  2. Bei dir ist ein Strich zwischen Advanced und Home, bei mir nicht. Hänge mal ein Bild an.
  3. Das sieht aber doof aus. Vorher hat es sich alleine nach unten verschoben. (Auch hier siehe Screen) So kann ich auch kein Hintergrund einfügen, es soll das sein bei Advanced

[ATTACH]4664[/ATTACH]

18

Ich meine die Weite von den oben Texten, die die man immer sieht.

Irgendwie muss ich die höhe verändern können, das sieht furchtbar aus im eingeklappten zustand.

19

Nein.

Die Höhe unter den Hauptelementen ist im eingeklappten zustand. Das war vorher nicht, da hat es sich beim aufmachen nach unten ausgeweitet

20

Jetzt geht nichts mehr, kannst es dir angucken