Auf Thema antworten

Beitrag

[QUOTE="camouflage81, post: 14515, member: 4986"]
Hi zusammen,
ich habe aktuell ein kleines Problem und bekomme es nicht gelöst.
Hier der HTML, CSS, JS Teil:

[CODE=css]    .fade {
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }[/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('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;
        }
      });
    });
  });[/CODE]

[CODE=html] 
 <h3>Leistung</h3>
 <a class="einblendenBtn" data-target="textElement1">EINBLENDEN_1</a>
 
 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.
 
 
 <a class="einblendenBtn" data-target="textElement2">EINBLENDEN_2</a>
 
 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.
 
 
 <a class="einblendenBtn" data-target="textElement3">EINBLENDEN_3</a>
 
 Text Kurz
 
 
 <a class="einblendenBtn" data-target="textElement4">EINBLENDEN_4</a>
 Ich bin ein Text_4
 
 <a class="einblendenBtn" data-target="textElement5">EINBLENDEN_5</a>
 Ich bin ein Text_5[/CODE]
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.
[ATTACH type="full" width="610px"]492[/ATTACH]
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
[/QUOTE]

Authentifizierung