CSS Problem mit ausgeblendeten Text

camouflage81 · 03.01.2024

Hi zusammen,
ich habe aktuell ein kleines Problem und bekomme es nicht gelöst.
Hier der HTML, CSS, JS Teil:

CSS:

    .fade {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

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('fade');
            element.style.opacity = 0;
          }
        });

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

        // Setze die Opazität des Ziel-Elements auf 1
        targetElement.style.opacity = 1;

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

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

    // Füge Event-Listener zum Ende der Transition hinzu
    texts.forEach(function(element) {
      element.addEventListener('transitionend', function () {
        if (!element.classList.contains('fade')) {
          element.style.opacity = 0;
        }
      });
    });
  });

HTML:

                                        <h3>Leistung</h3>
                                        <a class="einblendenBtn"  data-target="textElement1">EINBLENDEN_1</a>
                                        <span id="textElement1" class="fade">
                                        Der 150 Wörter Text ist eine kurze schriftliche Darstellung, die häufig in den Schulen und Universitäten verwendet wird. Es ist eine sehr effektive Art, ein Thema oder eine Idee in kompakter, aber informativer Weise darzustellen. Bevor Sie mit dem Schreiben beginnen, sollten Sie sich über das Thema informieren und einen Plan erstellen. Wählen Sie eine Struktur, die Ihrem Argument gerecht wird. Wählen Sie die richtigen Wörter, um Ihren Standpunkt klar und präzise darzustellen und vermeiden Sie unnötige Wiederholungen. Schließlich prüfen Sie Ihren Text, um sicherzustellen, dass er korrekt und fehlerfrei ist. Mit ein wenig Übung können Sie einen kurzen, informativen und überzeugenden Text schreiben.
                                        </span>
                                        <br />
                                        <a class="einblendenBtn"  data-target="textElement2">EINBLENDEN_2</a>
                                        <span id="textElement2" class="fade">
                                        Der 150 Wörter Text ist eine kurze schriftliche Darstellung, die häufig in den Schulen und Universitäten verwendet wird. Es ist eine sehr effektive Art, ein Thema oder eine Idee in kompakter, aber informativer Weise darzustellen. Bevor Sie mit dem Schreiben beginnen, sollten Sie sich über das Thema informieren und einen Plan erstellen. Wählen Sie eine Struktur, die Ihrem Argument gerecht wird. Wählen Sie die richtigen Wörter, um Ihren Standpunkt klar und präzise darzustellen und vermeiden Sie unnötige Wiederholungen. Schließlich prüfen Sie Ihren Text, um sicherzustellen, dass er korrekt und fehlerfrei ist. Mit ein wenig Übung können Sie einen kurzen, informativen und überzeugenden Text schreiben.
                                        </span>
                                        <br />
                                        <a class="einblendenBtn"  data-target="textElement3">EINBLENDEN_3</a>
                                        <span id="textElement3" class="fade">
                                            Text Kurz
                                        </span>
                                        <br />
                                        <a class="einblendenBtn"  data-target="textElement4">EINBLENDEN_4</a>
                                        <span id="textElement4" class="fade">Ich bin ein Text_4</span>
                                        <br />
                                        <a class="einblendenBtn"  data-target="textElement5">EINBLENDEN_5</a>
                                        <span id="textElement5" class="fade">Ich bin ein Text_5</span>

Bei einem Mausklick auf das jeweilige Element "z.B. EINBLENDEN_1" wird diese ausgeblendet und der dazugehörige Text eingeblendet.
Das ganze Funktioniert super.
Ich habe das Problem, dass der Text, der ausgeblendet ist, auf der Homepage Platz ein nimmt. Somit entstehen riesige Freiflächen.

Wie kann ich das verhindern bzw., wenn ich ein Element anklicke, soll der Rest nach unten geschoben werden?

Danke für eure Hilfe und Grüße
Thomas

Sempervivum · 03.01.2024

Das liegt daran, dass Du die Opacity animierst, denn dabei nimmt das Element im unsichtbaren Zustand den selben Platz ein wie im sichtbaren.
Ändere statt dessen animiert die Höhe, dann schrumpft der eingenommene Platz beim Ausblenden.

camouflage81 · 04.01.2024

Hi, danke für die Antwort.

ich bin mir nicht 100% sicher ob ich dich richtig verstanden habe.
Hier mein Ansatz der jetzt klappt.

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;
}

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';
        }
      });
    });
  });
});

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

Sempervivum · 04.01.2024

Guten Morgen,
Du hast mich 100% richtig verstanden und die Lösung, max-height zu animieren ist sehr verbreitet.
Allerdings, als ich deinen Code getestet habe, fiel auf, dass von einer Animation nichts zu sehen war. Der Grund ist, dass Du die Animation selbst ausgebremst hast, indem Du display: none; für den unsichtbaren Zustand gesetzt hast. Das wirkt sofort und lässt sich nicht animieren, so dass das max-height verpufft. Als ich das deaktiviert habe, funktionierte es immer noch nicht richtig: Der Text blieb sichtbar, auch ohne die Klasse "in". Der Grund dafür ist, dass ein span-Element ein inline-Element ist und bei diesen ist height, max-height etc. unwirksam. Nachdem ich display: block; statisch gesetzt habe, funktionierte dann alles wie gewünscht.

Mich Stört auch noch, dass ich im css die max-height: setzten muss.

Da bin ich voll bei dir, es ist immer anzustreben, dass sich das Skript oder CSS an die tatsächliche Höhe des Elementes automatisch anpasst. Leider, Du hast es vielleicht selbst schon bemerkt, lässt sich ein Element nicht nach einer Höhe von "auto" animieren, weshalb die Lösung mit max-height sehr verbreitet ist. In Javascript ist die natürliche Höhe jedoch immer als scrollHeight verfügbar, auch wenn man die Höhe height auf 0 gesetzt hat. Du kannst versuchen, es auf diese Weise im Javascript zu machen.
Was mich betrifft, teile ich nicht die Auffassung, dass man auf Biegen und Brechen alles mit CSS machen sollte. Die Sache mit max-height hat ihre Nachteile und deshalb setze ich damit lieber auf Javascript. Dass man die Animation selber mit CSS machen kann ist jedoch Klasse.