https://mundusjournalism.com/_assets/d336a48cc75b0ce72905efb565ce5df1/JavaScript/Infobox.js?1788776123

1$(function () {
2    var xMediaQuery = window.matchMedia("(min-width: 40em)")
3    checkOverflowInfo(xMediaQuery) // Call listener function at run time
4    xMediaQuery.addListener(checkOverflowInfo) // Attach listener function on state changes
5
6    window.addEventListener('resize', infoBox);
7    window.addEventListener('DOMContentLoaded', infoBox);
8    if (typeof showAllContentLangToken === 'undefined' ) {
9      showAllContentLangToken = '';
10    }
11    window.showAllContentLangToken = showAllContentLangToken;
12});
13
14function infoBox(evt) {
15        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");
16    let arrInfboxCnt = $arrInfoBox.length;
17    let lang = document.getElementsByTagName('html')[0].getAttribute('lang');
18
19    for (let i = 0; i < arrInfboxCnt; i++) {
20        // Get id
21        let infoBoxId = $arrInfoBox[i].id;
22
23        if ($arrInfoBox[i].parentElement.className.indexOf('frame-layout-news-info-box-collapse-wrapper')) {
24            $("#" + infoBoxId).wrap('<div class="frame-layout-news-info-box-collapse-wrapper"></div>');
25
26            // Add button
27            let newInfoboxButton = $('<button/>').attr({
28                id: "btn-" + infoBoxId,
29                title: evt.currentTarget.showAllContentLangToken,
30                class: "button button--icon button--icon--hide-label frame-layout-news-info-box-collapse-wrapper__toggle",
31                "aria-expanded": "false"
32            });
33            $arrInfoBox[i].parentElement.prepend(newInfoboxButton[0]);
34
35            // Add click handler
36            $("#btn-" + $arrInfoBox[i].id).click(function () {
37                let $btnSelector = $('#' + $arrInfoBox[i].id).parent();
38                $btnSelector.toggleClass("frame-layout-news-info-box-collapse-wrapper--is-expanded");
39                $btnSelector.toggleClass("frame-layout-news-info-box--is-overflown");
40                if ($('#btn-' + $arrInfoBox[i].id)[0].getAttribute('aria-expanded') == 'false') {
41                    $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'true')
42                } else {
43                    $('#btn-' + $arrInfoBox[i].id)[0].setAttribute('aria-expanded', 'false')
44                }
45            });
46        }
47    }
48}
49
50function checkOverflowInfo(x) {
51    const overflownClass = 'frame-layout-news-info-box--is-overflown';
52    const collection = document.querySelectorAll('.frame-layout-news-info-box-collapse-wrapper > div');
53    collection.forEach((div) => {
54        if (x.matches) {
55            div.classList.remove(overflownClass);
56        } else {
57            div.classList.add(overflownClass);
58        }
59    });
60}