Read More Button

[Melojezzed]

Hallo zusammen,

ich habe eine Webseite mit Elementor erstellt. Leider gibt es bei Elementor keinen "Read More" oder "Mehr erfahren" Button (ich wollte nicht das Accordion). Nun hab ich mir den Button selbst programmiert, jedoch hab ich zwei Dinge, die ich gerne noch ändern möchte:

1. Wenn man auf dem Button klickt, soll der Inhalt darunter langsam nach unten aufgehen. Jetzt geht er apprupt auf
2. Der Kasten soll sich erst öffnen, wenn man auf den Button klickt. Jetzt ist er bereits offen und schließt sich, wenn man drauf klickt.

Hier der Code den ich verwendet habe:

<button onclick="myFunction()" class="mehr">Mehr Veröffentlichungen</button>

CSS:

.mehr {
    background-color: #EA4290;
    color: white;
    border: none;
    text-transform: uppercase;
    display: inline-block;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 2.2em;
    transition: all 0.3s ease-in-out;
}

.mehr:hover {
    transform: scale(1.1);
}

.button-box {
    text-align: center;
}
​

JS

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}​

Es handelt sich um diese Seite: https://gretchenspudel.de

Vielen Dank!

[bdt600]

Siehe z.B. https://www.w3schools.com/howto/tryi...cordion_symbol

[Melojezzed]

Auf dieser Seite hab ich ja das mit dem Button rausgefunden. Und ein Accordion wollte ich ja nicht. Aber da muss irgend ein Code dazu, dass das ganze geschlossen startet und irgendwo muss was mit Transition gemacht werden, nur weiß ich nicht genau wie und wo. Hat wer noch einen Tip?

[Localfu]

Hi Melojezzed,
du kannst mithilfe der classList.add-Methode Klassen hinzufügen und mithilfe der classList.remove-Methode CSS-Klassen hinzufügen und entfernen. Gib dem Akkordeon-Element z.B. eine Klasse closed und wenn du es öffnen möchtest closed. Eine ditte Klasse die nicht entfernt wird kannst z.B. accordion nennen und dort mit CSS-Transition und height arbeiten.

[Sempervivum]

Und ein Accordion wollte ich ja nicht

Warum denn nicht, ein Akkordeon wie in dem Beispiel bei w3schools macht genau das, was Du brauchst: Ist am Anfang geschlossen und das Einblenden wird weich animiert. Falls Du dich daran störst, dass es mehrere Sets von Button und Container sind, kannst Du das problemlos auf einen reduzieren.

BTW: Besser "sprechende" Namen verwenden wie "veröffentlichungen" für die ID des Containers und "showHide" für den Funktionsnamen.

[Testie]

Es handelt sich um diese Seite: https://gretchenspudel.de

Hallo, alles f deiner Seite finde ich in der mobile Version keinen Button „mehr erfahren“. Ich dachte mir das dein Problem klarer wird wenn ich es live sehen kann.