1//slidetoggle javascript:
2
3var captionSel = document.querySelectorAll('.caption');
4
5for (let i = 0; i < captionSel.length; i++) {
6  let image = captionSel[i].querySelector(":scope > .caption-image");
7  let text = captionSel[i].querySelector(":scope > .caption-text");
8  text.style.width = image.clientWidth - 20 + "px";
9  captionSel[i].style.height = image.clientHeight + "px";
10}
11.caption {
12  overflow: hidden;
13}
14.caption-text {
15  color: white;
16  padding: 10px;
17  background: rgba(0, 0, 0, 0.4);
18  transition: transform 400ms ease;
19}
20.caption-image:hover + .caption-text,
21.caption-text:hover {
22  transform: translateY(-100%);
23}
24<div class="caption">
25  <img class="caption-image" src="http://faron.eu/wp-content/uploads/2013/05/Cheese.jpg" />
26  <div class="caption-text">Some words about how cheesy it is to use a picture of cheese for this example!</div>
27</div>
28
29<div class="caption">
30  <img class="caption-image" src="https://top5ofanything.com/uploads/2015/05/Tomatoes.jpg" />
31  <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>
32</div>

1var linkToggle = document.querySelectorAll('.js-toggle');
2
3for(i = 0; i < linkToggle.length; i++){
4
5  linkToggle[i].addEventListener('click', function(event){
6
7    event.preventDefault();
8
9    var container = document.getElementById(this.dataset.container);
10
11    if (!container.classList.contains('active')) {
12      
13      container.classList.add('active');
14      container.style.height = 'auto';
15
16      var height = container.clientHeight + 'px';
17
18      container.style.height = '0px';
19
20      setTimeout(function () {
21        container.style.height = height;
22      }, 0);
23      
24    } else {
25      
26      container.style.height = '0px';
27
28      container.addEventListener('transitionend', function () {
29        container.classList.remove('active');
30      }, {
31        once: true
32      });
33      
34    }
35    
36  });
37
38}