$(function () { var xMediaQuery = window.matchMedia("(min-width: 40em)") checkOverflowInfo(xMediaQuery) // Call listener function at run time xMediaQuery.addListener(checkOverflowInfo) // Attach listener function on state changes window.addEventListener('resize', infoBox); window.addEventListener('DOMContentLoaded', infoBox); if (typeof showAllContentLangToken === 'undefined' ) { showAllContentLangToken = ''; } window.showAllContentLangToken = showAllContentLangToken; }); function infoBox(evt) { let $arrInfoBox = $(".news-event__content-elements .frame-layout-news-info-box"); let arrInfboxCnt = $arrInfoBox.length; let lang = document.getElementsByTagName('html')[0].getAttribute('lang'); for (let i = 0; i < arrInfboxCnt; i++) { // Get id let infoBoxId = $arrInfoBox[i].id; if ($arrInfoBox[i].parentElement.className.indexOf('frame-layout-news-info-box-collapse-wrapper')) { $("#" + infoBoxId).wrap('
'); // Add button let newInfoboxButton = $('').attr({ id: "btn-" + infoBoxId, title: evt.currentTarget.showAllContentLangToken, class: "button button--icon button--icon--hide-label frame-layout-news-info-box-collapse-wrapper__toggle", "aria-expanded": "false" }); $arrInfoBox[i].parentElement.prepend(newInfoboxButton[0]); // Add click handler $("#btn-" + $arrInfoBox[i].id).click(function () { let $btnSelector = $('#' + $arrInfoBox[i].id).parent(); $btnSelector.toggleClass("frame-layout-news-info-box-collapse-wrapper--is-expanded"); $btnSelector.toggleClass("frame-layout-news-info-box--is-overflown"); if ($('#btn-' + $arrInfoBox[i].id)[0].getAttribute('aria-expanded') == 'false') { $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'true') } else { $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'false') } }); } } } function checkOverflowInfo(x) { if (x.matches) { // If media query matches const collection = document.getElementsByClassName("frame-layout-news-info-box-collapse-wrapper"); for (let i = 0; i < collection.length; i++) { collection[i].classList.remove("frame-layout-news-info-box--is-overflown"); } } else { const collection = document.getElementsByClassName("frame-layout-news-info-box-collapse-wrapper"); for (let i = 0; i < collection.length; i++) { collection[i].classList.add("frame-layout-news-info-box--is-overflown"); } } }