|
|||
Accordion ohne jQuery
Hallo,
ich bräuchte eine Javascript-Funktion (Accordion) zum weiterlesen von einem Text, wie es auch bereits in Verbindung mit jQuery gibt. Es ist aber so, dass ich nur diese Funktion benötige und dann ist es ja Unsinnig, das ganze jQuery mit "rumzuschleppen". Daher suche ich so eine Funktion als separaten JS-Code. Hier mal ein Beispiel, wie ich mir das vorstelle: Dies ist die erste Zeile des Beispieltextes. [Weiterlesen] Bei klick auf "Weiterlesen" soll das [Weiterlesen] verschwinden und der weitere Text angezeigt werden, so dass nun folgendes vorhanden ist: Dies ist die erste Zeile des Beispieltextes. Dies ist die zweite Zeile des Beispieltextes [weniger anzeigen] Bei klick auf "weniger anzeigen" soll wieder in den Ursprungszustand mit der ersten Zeile geschalten werden. Es wäre toll, wenn das ganze auch noch optisch ansprechend "erweitert" wird, also der Text Slidermäßig nach unten geschoben wird. Kann mir hier jemand helfen? Gruß Andreas |
Sponsored Links |
|
||||
Dafür brauchst du kaum Javascript, eventuell kannst du es mit dem CSS-Target-Selector auch ganz ohne Javascript lösen, dann kannst du aber immer nur ein Element aufklappen.
In meinem Beispiel wird Javascript nur zum Setzen der Klasse verwendet, die Animation geschieht mit CSS: HTML-Code:
<style> .toggle { overflow: hidden; max-height: 2em; transition: 500ms; } .toggle.toggled { max-height: 50em; } </style> <div class="toggle"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <script> document.querySelector('.toggle').addEventListener('click', function() { this.classList.toggle('toggled'); }); </script> Du kannst nicht zu height: auto; animieren, daher hier die Lösung über max-height (der Wert muss nur höher sein als die Textbox je werden kann). |
|
|||
Danke für deine Antwort.
Leider kenne ich mich in der Materie fast nicht aus, so dass ich auch nicht weiß wo ich da anfangen soll. Diese Funktion funktioniert leider nicht im IE8 und unter WindowsPhone 7.5. Daher suche ich eine Lösung mit JavaScript, da diese da funktioniert (zumindest tut es die mit jQuery). Das "Weiterlesen" macht auch ein Problem. Ich kann dies nicht fest positionieren. Je nach Seitenbreite wird dies dann evtl. nicht angezeigt. Hast du mir da vielleicht eine passende Lösung? Gruß Andreas Geändert von AndreasB. (08.11.2015 um 01:03 Uhr) |
|
||||
Witzig, wie spontan neue Anforderungen dazu kommen.
Frage 1) wieso musst du den IE8 unterstützen? Frage 2) wieso musst du den WP7.5 unterstützen? Frage 3) was für eine Fehlermeldung kommt beim IE denn? Frage 4) was für ein Problem gibt es mit der Seitenbreite? Lad deine Ergebnisse irgendwo hoch. Wir können mit schwammigen Aussagen nichts anfangen.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
||||
Na gut, der IE 8 ist steinalt, der kann weder CSS-Transitions noch classList. Statt classList zu verwenden, kannst du über className auf die Klassen als String zugreifen: https://jsfiddle.net/eth65sad/1/
Die Animation fehlt dir dann aber immer noch. Wenn du darauf Wert legst, musst du das mit Javascript lösen, entweder selbst schreiben oder du suchst dir eine (kleine) Bibliothek. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
jQuery Konflikt zwischen carouFredSel und Accordion? | Kipperdesign | Javascript & Ajax | 2 | 19.07.2014 18:47 |
Jquery Accordion Mouseover | roman | Javascript & Ajax | 9 | 26.06.2014 12:29 |
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? | papalapap | Javascript & Ajax | 8 | 13.08.2012 23:00 |
JQuery Accordion Frage | b74 | Javascript & Ajax | 1 | 20.11.2010 01:34 |
JQuery Accordion - Inhalte dynamisch nachladen | derMatze | Javascript & Ajax | 3 | 11.08.2009 15:18 |