Accordion Section | Erste Content Card soll onload offen sein

  • Hallo, ich bin neu hier und poste auch zum ersten mal, ich hoffe im richtigen Topic, weil es sich um eine html/js Frage handelt.


    Ich habe einen html/css/js Code für eine collapsible accordion section, der auch gut funktioniert und den ich meinen Bedürfnissen nach angepasst/zusammengestückelt habe -

    was ich jetzt noch schaffen möchte ist das die erste content card des accordions on page load geöffnet ist. Ich habe schon ein bisschen herumgespielt, und weiß dass

    man es mit ein paar zeilen js code und IDs bei den content cards lösen könnte, schaffe es aber leider nicht es zum funktionieren zu bringen.


    Vielleicht kann mir ja hier jemand helfen :)


    Liebe Grüße

    Johanna


  • Ohne das groß getestet zu haben, scheint mir, dass das alles über die Klasse "active" bei den Buttons gesteuert wird. In dem Fall dürfte es ausreichend sein, bei dem betr. Button diese Klasse hinzu zu fügen:

    Code
    1. <button class="collapsible active"><span style='font-weight: 700; font-family: "Source Sans Pro"; font-size: 20px; color: rgb(000, 000, 000); padding-left: 47px;'>Marketing</button>
  • Ohne das groß getestet zu haben, scheint mir, dass das alles über die Klasse "active" bei den Buttons gesteuert wird. In dem Fall dürfte es ausreichend sein, bei dem betr. Button diese Klasse hinzu zu fügen:

    Code
    1. <button class="collapsible active"><span style='font-weight: 700; font-family: "Source Sans Pro"; font-size: 20px; color: rgb(000, 000, 000); padding-left: 47px;'>Marketing</button>

    Hi, erstmal danke für deine schnelle Antwort! Hat leider nicht funktioniert, was passiert ist nachdem ich die button class geändert habe war das statt dem "+" das "-" angezeigt wird, aber der content ist trotzdem collapsed.


    https://codepen.io/junkscience/pen/WNEXNom

  • OK, da lag ich offenbar daneben, weil die Elemente nicht über CSS sichtbar gemacht werden sondern über Javascript. Also neuer Versuch: Einfach einen Klick auf den ersten Button simulieren:

    (ebenfalls ungetestet)

  • Also folgendes passiert: In Kombination mit dem ersten Button als "active" klassifiziert ist die card nicht offen wenn man die Seite aufmacht, dafür öffnet sie sich sobald man auf einen anderen button klick, d.h. es sind dann beide content cards offen. Wenn die Button class wieder normal is passiert garnichts. Dieses Din treibt mich in den Wahnsinn :wacko:

  • Der Fehler, den ich jetzt gemacht habe, besteht darin, dass ich das click() vor dem Registrieren der Eventlistener gemacht habe, dann läuft es natürlich ins Leere. Und bei diesem Ansatz musst Du die Klasse "active" beim ersten Button wieder löschen.

    BTW, ich vergaß: Willkommen im Forum :)

  • Der Fehler, den ich jetzt gemacht habe, besteht darin, dass ich das click() vor dem Registrieren der Eventlistener gemacht habe, dann läuft es natürlich ins Leere. Und bei diesem Ansatz musst Du die Klasse "active" beim ersten Button wieder löschen.

    BTW, ich vergaß: Willkommen im Forum :)

    Suuuuper, das hat funktioniert! Ich danke dir vielmals für die schnelle Hilfe und den netten Empfang, du hast mir den Abend gerettet :)