Beispiel:JS-classlist.toggle-v2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<script>
document.addEventListener('DOMContentLoaded', function () {

  function setButtonText(button, container) {
    button.textContent = container.classList.contains('closed') ? 
                             button.dataset.closedText :
                             button.dataset.openedText
  }

  function toggleReadmoreElement(event) {
    const toggleButton = event.target.closest("button");
    if (!toggleButton || !toggleButton.classList.contains("readmore-toggle"))
      return;

    const toggleContainer = toggleButton.closest(".readmore-container");
    if (!toggleContainer)
      return;
    
    toggleContainer.classList.toggle('closed');
    setButtonText(toggleButton, toggleContainer);
  }

  document.querySelector("main")
          .addEventListener("click", toggleReadmoreElement);

  for (let toggleContainer of document.querySelectorAll(".readmore-container")) {
    let toggleButton = toggleContainer.querySelector(".readmore-toggle");
    if (toggleButton)
      setButtonText(toggleButton, toggleContainer);
  }
});
</script>    
  <style>
    main {
      display: flex;
      flex-flow: row wrap;
    }
    #tipp {
      flex: 1 1 100%;
      height: 1.5em; 
    }
    section, aside {
      flex: 2 1 0;
      padding: 1em;
      margin: 1em;
      background-color: #f1f3f4; 
      border: 2px dotted #adadad;
      height: 30em;
      transition: height 1s ease-in-out; 
    }  
    .readmore-container.closed {
      transition: height 1s ease-in-out; 
      height: 6em; 
      overflow: hidden;
    }
  </style>
  <title>Beispiel: element.ClassList - 4</title>
</head>

<body>
<h1>Beispiel: Element.classList.toggle</h1>
 
  <main>
    <p id="tipp">Wollen Sie mehr lesen? Dann klicken Sie auf den Button.</p>
    <section id="aktuelles" class="readmore-container">
      <h2>Aktuelles</h2>
      <button class="readmore-toggle" data-closed-text="mehr..." data-opened-text="weniger..."></button>
    </section>  
    <section id="ueber" class="readmore-container closed">    
      <h2>Über uns</h2>
      <button class="readmore-toggle" data-closed-text="mehr..." data-opened-text="weniger..."></button>
    </section>
    <aside id="links">
      <h2>Links</h2>
    </aside>  
  </main>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-classlist.toggle-v2.html&oldid=86542“