[FRAGE] Divs auf-und zuklappen mit automatischer Höhe. Nimmt aber nur Höhe vom ersten Div.

lmente · 13. Jan. 2015

Hallo Community

Ich bin neu hier im Forum und noch absoluter Anfänger in Javascript.
Für ein aktuelles Projekt muss ich nun etwas umsetzen aber komme leider nicht weiter. Hab auch schon viel gesucht aber die meisten Lösungen funktionierten bei mir nicht.
Daher hoffe ich dass mir jemand von euch vielleicht etwas weiterhelfen kann..

Ich möchte gerne verschiedene Divs (mit gleicher Klasse) die untereinander liegen einzeln ein- und ausfahren lassen wenn man drauf klickt.
Wenn ein Div ausfährt soll es sich automatisch an die Höhe seines Inhaltes anpassen, und wenn es zuklappt etwa bei 40px stehen bleiben, damit die Überschrift darin noch sichtbar ist.

Habe im Netz auch schon einen passenden Code gefunden und dieser erkennt auch die automatische Höhe aber leider nimmt er nur die Höhe des ersten Divs in der Reihe und wendet diese auch bei den anderen an, so dass die anderen dann beschnitten oder zu lang sind...

Könnte jemand von euch vielleicht mal drauf schauen und mir sagen was da noch falsch läuft?

Hier ist der JS-Code:

Code:

 $(document).ready(function(){
    $(".filialen").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height: $(".filialen").get(0).scrollHeight}, 200 ).removeClass('hide');
      } else {
        $(this).animate({height:"36px"},200).addClass('hide');
      }
    });
  });

und hier mein Html-Aufbau:

HTML:

<div class="filialen">

<p>
Inhalt eines kurzes Divs.
Inhalt eines kurzes Divs.
Inhalt eines kurzes Divs.

</p>

</div>



<div class="filialen">

<p>
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
Inhalt eines langen Divs.
</p>

</div>

Noch das Css

Code:

.filialen

{

width:100px;
height:auto;
overflow:hidden;
}

Schon mal vielen Dank vorraus und beste Grüße

LikeStar · 13. Jan. 2015

Hallo,

das wird dir möglicherweise helfen:

Link

lmente · 14. Jan. 2015

Lieben Dank für deine Antwort.

Diesen Link kenne ich auch schon. Leider funktioniert die Lösung darin nicht bei dem was ich vor habe.
Hier wird nicht mit Höhe gearbeitet sondern mit Ausblenden.
Die Überschrift innerhalb des DIVs ist hierbei sozusagen der Button, und der Text danach der Content der ausgeblendet wird. Sowas kann ich aber leider nicht anwenden.

Ich kann auf Grund komplizierter Umstände nur das äußere Div animieren und ihm sagen dass es die Höhe verändern soll.

Also mal ein vereinfachte Version meines Problems:
Es soll nur ein einzelner Textblock in meinem Div sein.
(Daher gibt es keine Überschrift die als Button dienen kann und der man dann sagen würde: blende alles nach mir aus.)
Also muss ich mit Höhenverschiebung des äußeren DIvs arbeiten damit von diesem Textblock noch der obere Satz zu sehen ist wenn ich ihn zuklappe.

Hoffe es ist einigermaßen zu verstehen...

Der Codeschnnippsel von meinem ersten Post funktioniert auch fast perfekt, nur die automatische Höhe wird nicht erkannt..

LikeStar · 14. Jan. 2015

lmente schrieb:
ich kann auf Grund komplizierter Umstände nur das äußere Div animieren

Klingt fast so, als würdest du eine bereits programmierte Webseite umändern wollen.
Schick uns doch deinen Link oder deinen vollständigen Quelltext

Ich weiß auch schon wieso

lmente · 14. Jan. 2015

LikeStar schrieb:
Ich weiß auch schon wieso

Oh was meinst du?

Also ich arbeite mit Typo3 und der Inhalt der Divs die ich animieren will wird automatisch generiert. Darin liegen aufeinanderfolgende Divs mit immer gleichem Inhalt und gleicher Klasse außer, dass das erste von ihnen eine Überschrift hat. Diese ist aber mit in dem ersten Div enthalten. Also kann ich sie nicht als Button für alle anderen Elemente verwenden. Wenn ich das tue klappt immer nur das erste DIv von allen ein. Also muss ich mit der Höhe des umschließenden DIvs arbeiten.

Also hier ist der konkrete Aufbau eines Divs:
(Den ganze Quellcode brauche ich glaube nicht schicken da es echt zu viel und zu durcheinander ist da von Typo3 generiert):

HTML:

<div class="filialen">

<div class="adresse">

<h2 class="ueberschrift">Deutschland</h2>
<p class="name">
<p class="address_neu">Muster Allee 20</p>
<p class="address_neu">10247</p>
<p class="address_neu">Berlin</p>
<p class="email_neu">mustermap@web.de</p>
</div>

<div class="adresse">
<p class="name">
<p class="address_neu">Musterstr. 12</p>
<p class="address_neu">10247</p>
<p class="address_neu">Berlin</p>
</div>

<div class="adresse">
<p class="name">
<p class="address_neu">Muster Allee 9</p>
<p class="address_neu">10247</p>
<p class="address_neu">Berlin</p>
</div>

<div class="adresse">
<p class="name">
<p class="address_neu">Muster Allee 13</p>
<p class="address_neu">10247</p>
<p class="address_neu">Berlin</p>
</div>

</div>

Das umschließende DIV "filialen" soll ein- und aus klappen und die Überschrift "Deutschland" soll noch zu sehen sein.
Es muss auf jeden Fall in der Reihenfolge bleiben..

Ich hab übrigens den JS-CODE auch schon in einem einfacher aufgebautem html-Datei ausprobiert außerhalb von Typo3 und da geschieht das gleiche Problem, dass die Höhe vom ersten DIv übernommen wird.

Hier ist das HTML:

HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Unbenanntes Dokument</title>


<script src="http://code.jquery.com/jquery-latest.js"></script>




<style type="text/css">

.filialen

{

width:100px;
height:auto;
overflow:hidden;
}
</style>



<script type="text/javascript" language="javascript">



 $(document).ready(function(){
    $(".filialen").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height: $(".filialen").get(0).scrollHeight}, 200 ).removeClass('hide');
      } else {
        $(this).animate({height:"36px"},200).addClass('hide');
      }
    });
  });



</script>



</head>






<body>


<div class="filialen">

<p>
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.

</p>


</div>


<div class="filialen">

<p>
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.
Hier steht der ganze Inhalt.


</p>


</div>



</body>

</html>

Danke für die Mühe!

LikeStar · 14. Jan. 2015

Das soll nicht etwa so aussehen?

Im Anhang befindet sich ein Bild.

lmente · 14. Jan. 2015

@LikeStar

Danke für deine Antwort!

Ja so in etwa soll der Klappzustand aussehen. Hast du dafür eine Lösung?

Sempervivum · 14. Jan. 2015

Hallo Imente,
ja, die vorgefertigten Akkordeon-Skripte setzen meistens voraus, dass die Elemente eine Überschrift haben und ganz zugeklappt werden.
So eine Aufgabe wie deine habe ich vor einiger Zeit mal gelöst. Ich habe es so gemacht, dass ich am Anfang bei aufgeklappten Divs die Höhe in einem Array gespeichert habe. Etwas eleganter wäre es, die Höhe in einem data-Attribut zu speichern:

Code:

$(document).ready(function(){
    var minH = 36;
    $(".filialen").each(function() {
        $(this).data("fullheight", $(this).height()).height(minH).addClass('hide');
    });
    $(".filialen").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height: $(this).data("fullheight")}, 200 ).removeClass('hide');
      } else {
        $(this).animate({height: minH + "px"},200).addClass('hide');
      }
    });
});

- - - Aktualisiert - - -

PS: Wenn in zugeklapptem Zustand genau eine Zeile sichtbar sein soll, könnte dir die Eigenschaft lineHeight helfen.

lmente · 15. Jan. 2015

@sempervivum

Lieben Dank für deine Hilfe!

Wenn ich den Code anwende slidet es leider komplett zu und die Inhalte in dem Div sind nicht mehr sichtbar..
Aber ich werde mal versuchen es noch anzupassen.

Ich habe aber auch heute morgen die Option Childselector gefunden, womit ich nur bestimmten Divs in dem Hauptdiv sagen kann dass sie Toggeln sollen. So bleibt die Überschrift sichtbar.
Und ich habe es auch doch noch geschafft ein seperates Div anzulegen als Button und es unsichtbar auf die Übschrift gelegt, so dass ich nicht immer das ganze Div als Klickfläche habe.
Damit habe ich bis jetzt das beste Ergebnis erzielt.

Hier ist mal der jetzige Code:

HTML:

<div class="filialen">

<div class="klick"></div>

<div class="filiale_komplett">
<h2 class="land_blau">Deutschland</h2>
<p class="name" style="display: block;">
<p class="address_neu" style="display: block;">Muster Allee 20</p>
<p class="address_neu" style="display: block;">10247</p>
<p class="address_neu" style="display: block;">Berlin</p>
<p class="email_neu" style="display: block;">mustermap@web.de</p>
<p class="none" style="display: block;"></p>
</div>


<div class="filiale_komplett">
<p class="name" style="display: block;">
<p class="address_neu" style="display: block;">Muster Allee 20</p>
<p class="address_neu" style="display: block;">10247</p>
<p class="address_neu" style="display: block;">Berlin</p>
<p class="email_neu" style="display: block;">mustermap@web.de</p>
<p class="none" style="display: block;"></p>
</div>


<div class="filiale_komplett">
<p class="name" style="display: block;">
<p class="address_neu" style="display: block;">Muster Allee 20</p>
<p class="address_neu" style="display: block;">10247</p>
<p class="address_neu" style="display: block;">Berlin</p>
<p class="email_neu" style="display: block;">mustermap@web.de</p>
<p class="none" style="display: block;"></p>
</div>

</div>

Code:

    $(document).ready(function(){
   $('.klick').click(function(){
       $(this).closest('.filialen').find('.filiale_komplett p').toggle("slow");
        $('.klick').not(this).closest('.filialen').find('.filiale_komplett p').slideUp();
   });
});

Also ist das Problem jetzt erst einmal gelöst.

Liebe Dank nochmal und beste Grüße
Line

Sempervivum · 15. Jan. 2015

Wenn ich den Code anwende slidet es leider komplett zu und die Inhalte in dem Div sind nicht mehr sichtbar.

Dann musst Du bei der Anwendung einen Fehler gemacht haben, denn ich hatte den Code getestet, bevor ich ihn gepostet habe und die erste Zeile war immer sichtbar.

lmente · 15. Jan. 2015

Hm, komisch. Vielleicht habe ich den Code falsch eingefügt..
Bei mir ist immer nur die Überschrift zu sehen und wenn ich drauf klicke toggelt sie komplett weg. Seltsam.
Na ich schau nochmal wo bei mir der Fehler liegt.

Danke und viele Grüße

Sempervivum · 16. Jan. 2015

Naja, Du hast ja schon eine andere Lösung gefunden. Anscheinend hatte ich dich falsch verstanden: Ich dachte, Du wolltest jedes Div einzeln auf und zuklappen, aber bei deiner eigenen Lösung klappen sie alle auf einmal auf und zu und nur die Überschrift im ersten bleibt stehen.

lmente · 16. Jan. 2015

Achso, ja das äußere Div "filialen" wollte ich gerne geschlossen haben mit der Überschrift. Daher hatte ich auch zwischendurch ein Version geposet wo nur ein Textblock darin enthalten war.
Die Version mit den vielen Divs als Inhalt war wahrscheinlich zu verwirrend. Sorry.

lmente · 17. Jan. 2015

Hallo!

Ich habe noch eine weitere Frage zu dem aufklappbaren Div und will nicht extra ein neues Thema eröffnen.

Ich habe es geschafft vor das Div nun doch einen Button zu packen. Nun würde ich gerne das die Überschrift (h2) aus dem Div darunter ("filialen") ausgelesen und in diesen Button übernommen wird.

Es ist so, dass das Div "filialen" mehrfach generiert wird von Typo3 und untereinander angeordnet wird. Die Überschrift darin ist aber immer anders (unterschiedliche Ländernamen).

Mein Problem ist, dass nur die Überschrift aus dem ersten Div übernommen wird in den Button wie man im Quelltext sieht..

Hier meine Codes:

Das html aus dem Quelltext:

HTML:

<button class="klick">Ägypten</button>

<div class="filialen">
<div class="filiale_komplett">
<h2 class="land_blau">Ägypten</h2>
<div class="filiale_address"></div>

</div>
</div>



<button class="klick">Ägypten</button>

<div class="filialen">
<div class="filiale_komplett">
<h2 class="land_blau">Griechenland</h2>
<div class="filiale_address"></div>

</div>
</div>



<button class="klick">Ägypten</button>

<div class="filialen">
<div class="filiale_komplett">
<h2 class="land_blau">Amerika</h2>
<div class="filiale_address"></div>

</div>
</div>



<button class="klick">Ägypten</button>

<div class="filialen">
<div class="filiale_komplett">
<h2 class="land_blau">Schweden</h2>
<div class="filiale_address"></div>

</div>
</div>

Das jQuery:

Code:

$('.klick').html($('.filialen').find('.filiale_komplett h2').html());

Ich finde nicht heraus warum nicht die unterschiedlichen Überschriften ausgegeben werden...

Wäre sehr dankbar für Hilfe.

Beste Grüße

Sempervivum · 17. Jan. 2015

Wenn ich dich diesmal richtig verstehe, müsste die jQuery-Funktion next() dein Problem lösen:

Code:

            $(document).ready(function () {
                $('.klick').each(function () {
                    $(this).html($(this).next('.filialen').find('h2').html());
                });
            });

lmente · 17. Jan. 2015

@Sempervivum

Cool! Genau das wars! Es funktioniert jetzt einwandfrei!

Besten Dank!!

)

[FRAGE] Divs auf-und zuklappen mit automatischer Höhe. Nimmt aber nur Höhe vom ersten Div.

lmente

New member

LikeStar

New member

lmente

New member

LikeStar

New member

lmente

New member

LikeStar

New member

Anhänge

lmente

New member

Sempervivum

Banned

lmente

New member

Sempervivum

Banned

lmente

New member

Sempervivum

Banned

lmente

New member

lmente

New member

Sempervivum

Banned

lmente

New member