SlideToggle open only one container at a time Vanilla JS

Question

Maybe someone know how to open only one container at a time? Now in this example you can open all three? I would like to open only one and when it's opened change text to "Close". Any ideas?

Here is the link with a code to codepen: code https://codepen.io/jorgemaiden/pen/YgGZMg

I'll be really apreciate for any help and tips!

Answer 1

You can do it in many ways, but according to your reference, I would just add function that loop through your elements which is not your clicked element, then remove active class if it's present

var linkToggle = document.querySelectorAll(".js-toggle");

for (i = 0; i < linkToggle.length; i++) {
  linkToggle[i].addEventListener("click", function(event) {
    event.preventDefault();

    var container = document.getElementById(this.dataset.container);
    this.innerText = "Close";
    toggleSlide(container);
  });
}

function toggleSlide(container) {
  for (i = 0; i < linkToggle.length; i++) {
    let el = document.getElementById(linkToggle[i].dataset.container);
    if (el != container && el.classList.contains("active")) {
      el.style.height = "0px";
      linkToggle[i].innerText = "Click";
      el.addEventListener(
        "transitionend",
        function() {
          el.classList.remove("active");
        }, {
          once: true
        }
      );
    }
  }
  if (!container.classList.contains("active")) {
    container.classList.add("active");
    container.style.height = "auto";

    var height = container.clientHeight + "px";

    container.style.height = "0px";

    setTimeout(function() {
      container.style.height = height;
    }, 0);
  } else {
    container.style.height = "0px";

    container.addEventListener(
      "transitionend",
      function() {
        container.classList.remove("active");
      }, {
        once: true
      }
    );
  }
}

.box {
  width: 300px;
  border: 1px solid #000;
  margin: 10px;
  cursor: pointer;
}

.toggle-container {
  transition: height 0.35s ease-in-out;
  overflow: hidden;
}

.toggle-container:not(.active) {
  display: none;
}

<div class="box">
  <div class="js-toggle" data-container="toggle-1">Click</div>
  <div class="toggle-container" id="toggle-1">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>

<div class="box">
  <div class="js-toggle active" data-container="toggle-2">Click</div>
  <div class="toggle-container open" id="toggle-2">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>

<div class="box">
  <div class="js-toggle" data-container="toggle-3">Click</div>
  <div class="toggle-container" id="toggle-3">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br> I have an accordion and am animating the the height fferent lengths.
  </div>
</div>