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