Auf Thema antworten

Beitrag

[QUOTE="camouflage81, post: 14517, member: 4986"]
Hi, danke für die Antwort.

ich bin mir nicht 100% sicher ob ich dich richtig verstanden habe.
Hier mein Ansatz der jetzt klappt.
[CODE=css]/* Verstecke die Span-Elemente und Links standardmäßig */
.fade {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out;
  display: none;
}

.fade.in {
  max-height: 150px; /* Setze hier die maximale Höhe des Texte */
  display: block;
}[/CODE]

[CODE=javascript]document.addEventListener('DOMContentLoaded', function () {
  var buttons = document.querySelectorAll('.einblendenBtn');
  var texts = document.querySelectorAll('.fade');

buttons.forEach(function (button) {
    button.addEventListener('click', function (event) {
      event.preventDefault();

var targetId = this.getAttribute('data-target');
      var targetElement = document.getElementById(targetId);

// Verberge alle Elemente mit der Klasse "fade"
      texts.forEach(function (element) {
        if (element !== targetElement) {
          element.classList.remove('in');
        }
      });

// Füge die Klasse "in" zum Ziel-Element hinzu
      targetElement.classList.add('in');

// Verberge den angeklickten Button
      this.style.display = 'none';

// Zeige die anderen Buttons
      buttons.forEach(function (otherButton) {
        if (otherButton !== button) {
          otherButton.style.display = 'inline';
        }
      });
    });
  });
});[/CODE]

Hättest du es anders gemacht oder eine bessere Alternative?
Mich Stört auch noch, dass ich im css die  max-height: setzten muss.
Danke und Grüße
[/QUOTE]

Authentifizierung