Answers for "slidetoggle javascript"

slidetoggle javascript

//slidetoggle javascript:

var captionSel = document.querySelectorAll('.caption');

for (let i = 0; i < captionSel.length; i++) {
  let image = captionSel[i].querySelector(":scope > .caption-image");
  let text = captionSel[i].querySelector(":scope > .caption-text");
  text.style.width = image.clientWidth - 20 + "px";
  captionSel[i].style.height = image.clientHeight + "px";
}
.caption {
  overflow: hidden;
}
.caption-text {
  color: white;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  transition: transform 400ms ease;
}
.caption-image:hover + .caption-text,
.caption-text:hover {
  transform: translateY(-100%);
}
<div class="caption">
  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
</div>

<div class="caption">
  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
  <div class="caption-text">There's nothing witty to say about a tomato, maybe some you say I say stuff. But honstly I can't think of anything...</div>
</div>

vanilla javascript slide toggle

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

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

}