Text in page klappt auf (expand) - wie geht das?

  • Hallo,
    habe in einem Blog ein gestalterisch sehr schönes Element gesehen. Das hätte ich auch gerne.

    Hier klappt der Text auf und wieder zu (expand and collapse), wenn man die nächste Überschrift klickt.
    Ist wohl über class gesteuert, also über ein jquery oder mootools plugin? Habe auch smartslider ausprobiert. Aber ich kriege das so nicht hin.

    Wer kann mir erklären, wie man das machen kann.
    Was brauche ich für ein plugin, was für einen Code und wo setze ich es ein?
    Über Unterstützung würde ich mich sehr freuen.

    Ciao.

    Einmal editiert, zuletzt von nstern (16. Januar 2011 um 22:34)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Vielen Dank für den Hinweis.
    Ich habe jetzt das mootools plugin installiert.

    Allerdings habe ich mein Accordion immer noch nicht zum Laufen bringen können.
    Was mache ich wohl falsch?

    Ich habe in mein style.css mit dem css accordion ergänzt und gespeichert. Dann eine neue Seite erstellt und den demo html code in die neue Seite eingesetzt. Aber die Textabschnitte sind zwar sichtbar, klappen aber nicht auf.
    Was fehlt denn noch? Muss man java script noch irgendwo einsetzen? Ich dachte, dass macht das aktivierte plugin automatisch.
    http://mootools.net/demos/?demo=Accordion

    Wäre super, wenn mir jemand helfen kann.

  • Sieht aus, als hättest Du das hier vergessen in Deiner Seite:

    Code
    window.addEvent('domready', function(){
      new Fx.Accordion($('accordion'), '#accordion h2', '#accordion .content');
    });



    Ist auf jeden Fall im Quellcode der mootools-Seite und in Deiner nicht.

  • Würde ich einfach mal ausprobieren - zB einfach mal in den Inhalt der Seite (HTML-Ansicht). Bei mootools steht es auch im Inhalts-Bereich - macht ja auch Sinn, wenn man das selbst einsetzen muss, da das Plugin ja nicht wissen kann, wie Deine DIVs heissen und wie viele Du hast...

  • Hast Du es auch als Javscript eingegeben und nicht einfach meinen Text von oben?

    Also so:

  • Also, es klappt auch nicht. Habe jetzt den Code so eingegeben.

    Nun habe ich nicht nur ein mootools plugin installiert, sondern auch mootools framework. Dachte es lag daran. Aber es geht immer noch nicht.
    Hmmm...

  • Danke, habe ich mir angesehen. Ich verstehe jedoch immer noch nicht WO man den java script code einbauen muss.
    - im header.php

    Ich verstehe den technischen Zusammenhang an der Stelle nicht.

  • Dieser Code

    Code
    <ul id="toggle-view">....bis </ul>

    kommt in den Artikel

    der css-Code
    also beginnend mit

    Code
    #toggle-view {

    kommt in die style.css deines Themes

    das kleine Skript kommt so

    in die header.php

    den toggle-Ordner aus dem Download, fügst du in den Ordner deines Themes..(die index.html darin kannst du löschen..ist nur als Beispiel gedacht)
    jetzt musst du nur noch den Link auf die jquery.js in diesem Ordner setzen

    also auch in die header.php

    sieht dann so etwa aus

    Code
    <script type="text/javascript" src="http://dharma-training.de/wp-content/themes/spacecolor/toggle/js/jquery.js"></script>

    Einmal editiert, zuletzt von Tutrix (14. Januar 2011 um 23:40)

  • Hallo, ich klinke mich hier mal ein. Ich suche ebenfalls eine Accordion-Lösung, aber so, dass auch mein Kunde sie bedienen kann - es soll also möglichst einfach sein.

    Hier ist die Beispielseite:

    http://buero-im-griff.com/wordpress/wp-a…=edit&message=1

    Es gibt eine Hauptüberschrift (hier: "Beratung"), das ist der Seitentitel, und dann gibt es Nebenüberschriften. Die sollen der Titel des Togglers werden, was drunter steht, soll sichtbar werden, wenn man das Accordion aufklappt. Wichtig ist: Es steht alles auf einer SEITE. Accordion mit Posts (Artikeln) habe ich schon gemacht - funktioniert sehr gut.

    Es gibt neinige Accordion-Plugins bei wordpress.org, aber das sind alles Lösungen für Sidebar-Widgets.

    Die Linkliste (20 beste Plugins) oben ist zwar nett, aber man muss immer wieder Code einfügen. Das wäre nicht so schlimm, wenn Wordpress mir nicht immer wieder den Code weghauen würde.

    Wenn ich also zum Besipiel diese Lösung nehme und per Hand den Code eingebe, erscheint nur der reine Text. Hat jemand noch eine Idee, wie man das möglichst simpel löst?


  • Wenn ich also zum Besipiel diese Lösung nehme und per Hand den Code eingebe, erscheint nur der reine Text. Hat jemand noch eine Idee, wie man das möglichst simpel löst?

    Der Code ist schon vorhanden, aber du hast die Scripte, sowie die css falsch verlinkt.

    Du hast ja alles in deinen Theme-Ordner eingefügt, folglich muss der Pfad auch dort hin führen.
    Im Moment führt er in den wordpress-Ordner und nicht in den Theme-Ordner

    Als Vorlage kannst du ja, den Pfad zur style.css deines Themes verwenden.

  • Nachdem ich jetzt seit Tagen versucht habe Mootools (mit schönen fertigen Accordion Designs) auf wordpress zum Laufen zu bringen, möchte ich euch das Ergebnis mitteilen:

    1. Da mein Theme jquery verwendet, gibt es Konflikte mit mootools. Die laufen also nicht gleichzeitig.

    2. Ich nutze jetzt nun doch das Simple jQuery Accordion Menu von Der perfekte Accordion-Effekt mit jQuery

    ABER, es waren total viele Anpassungen notwendig. Und jetzt sehe ich, dass es zwar im Firefox gut aussieht, aber im IE komisch aufspringt.
    Fazit: das ganze ist echt aufwendig.

    Weiss jemand, wie ich diesen Fehler auf der Testseite im IE lösen kann?

    http://www.stemkoski.com/stupid-simple-…accordion-menu/

  • Kennt sich jemand mit jQuery aus?Ich habe dieses Plugin (http://www.jeffikus.com/downloads/word…cordion-plugin/) installiert, funktioniert wunderbar, muss nur etwas entspeckt werden, wenn man nur die Akkordion-Funktion verwenden will.

    Ich habe eine Seite eingerichtet, in der alle Posts einer Kategorie als Akkordeon untereinander dargestellt werden, das geht mit Hilfe eines Shortcodes. Angeblich soll die Default-Einstellung im Script so sein, dass der erste Post geöffnet ist. Soweit ich es verstehe, ist dafür die Funktion "active" zuständige. So sieht das im Script aus:

    Unter "active" steht da jetzt "null" (so war es ursprünglich eingestellt), aber was auch immer ich da versuche: der erste Post ist nie geöffnet, wenn ich die Seite noch mal neu lade. Was mache ich falsch?

    (Ich kann leider keinen Link posten - die Sache lauft auf meinem Xampp-Server.)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!