https://normativ.org/tools/js/main-mobile-library.js

1(function () {
2    function initNodeForTransition(node) {
3        node.style.height = node.getBoundingClientRect().height + 'px';
4        node.style.transition = 'height 1000ms linear';
5        node.style.overflowY = 'hidden';
6    }
7
8    window.addEventListener('DOMContentLoaded', function () {
9        /** @type HTMLDivElement */
10        var libraryWrapper = document.querySelector('.js-library__wrapper');
11        initNodeForTransition(libraryWrapper);
12        libraryWrapper.addEventListener('transitionend', function(e) {
13            if (e.target === this) {
14                this.style.height = 'auto';
15            }
16        });
17
18        /** @type HTMLDivElement */
19        var libraryShowMoreButtonWrapper = document.querySelector('.js-library__show-more__wrapper');
20        initNodeForTransition(libraryShowMoreButtonWrapper);
21
22        /** @type HTMLAnchorElement */
23        var libraryShowMoreButton = document.querySelector('.js-library__show-more');
24        libraryShowMoreButton.addEventListener('click', function (e) {
25            e.preventDefault();
26            libraryShowMoreButtonWrapper.style.height = '0px';
27            var libraryMobileItemsList = document.querySelectorAll('.js-library__mobile-item');
28            Array.prototype.slice.call(libraryMobileItemsList).forEach(function (/** HTMLDivElement */ libraryMobileItem) {
29                libraryMobileItem.classList.remove('d-none');
30            });
31            requestAnimationFrame(function () {
32                libraryWrapper.style.height = libraryWrapper.firstElementChild.getBoundingClientRect().height + 'px';
33            })
34        })
35    })
36})();