$(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-left,.news-event__content-elements .frame-layout-news-info-box-right,.news-event__content-elements .frame-layout-news-info-box-center,.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) { const overflownClass = 'frame-layout-news-info-box--is-overflown'; const collection = document.querySelectorAll('.frame-layout-news-info-box-collapse-wrapper > div'); collection.forEach((div) => { if (x.matches) { div.classList.remove(overflownClass); } else { div.classList.add(overflownClass); } }); }