zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Accordion ohne jQuery

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2015, 01:55
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 46
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2015, 20:38
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 46
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

Keiner eine Idee?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.11.2015, 21:05
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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>
Zum Ausprobieren hier eine Demo: https://jsfiddle.net/eth65sad/

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).
Mit Zitat antworten
  #4 (permalink)  
Alt 08.11.2015, 00:56
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2009
Beiträge: 46
AndreasB. befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #5 (permalink)  
Alt 08.11.2015, 15:47
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #6 (permalink)  
Alt 08.11.2015, 18:38
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.016
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:18 Uhr.