function toggle_clicked_class_tag(tag_name, class_name='clicked') {
    for (let elt of document.getElementsByTagName(tag_name)) {
        elt.classList.toggle(class_name);
    }
}

function toggle_clicked_class_sel(selectors, class_name='clicked') {
    for (let elt of document.querySelectorAll(selectors)) {
        elt.classList.toggle(class_name);
    }
}

function set_clicked_class_id(trigger_elem_id, target_elem_id=null, class_name='clicked') {
    if (target_elem_id === null) { target_elem_id = trigger_elem_id; }
    document.getElementById(trigger_elem_id).addEventListener(
        "click",
        function() {
            document.getElementById(target_elem_id).classList.toggle(class_name);
        }
    );
}

function get_elt(arg) {
    if (typeof arg === 'string') {
        // we should have an id
        return document.getElementById(arg);
    }
    else {
        // we should have an element
        return arg;
    }
}

function clicked_cls(elt) {
    /* toggle "clicked" class on each click, and remove "init" class if present */
    // init
    if (elt.classList.contains("init")) {
        elt.classList.remove("init");
    }

    // clicked
    elt.classList.toggle("clicked");
}

function clicked_mh_fix(arg) {
    /* toggle clicked, and fix max-height on transitionend
     *
     * needed to workaround transition issue with max-height:none
     *
     * inspired from https://css-tricks.com/using-css-transitions-auto-dimensions,
     * thanks to Brandon Smith */
    elt = get_elt(arg);

    if (!elt.classList.contains("clicked")) {
        /* expand */
        var fix_expand = function(event) {
            elt.removeEventListener("transitionend", fix_expand, false);
            if (elt.classList.contains("clicked")) {
                /* if event is clicked quicker than transition time,
                 * this callback can be called on reduce */
                elt.style.maxHeight = "none";
            }
        };

        elt.setAttribute('max_height_init', elt.clientHeight);
        elt.addEventListener("transitionend", fix_expand, false);
        clicked_cls(elt);
        elt.style.maxHeight = elt.scrollHeight + 'px';
    }
    else {
        /* reduce */
        var transition_save = elt.style.transition;
        elt.style.transition = '';
        requestAnimationFrame(function() {
            elt.style.maxHeight = elt.scrollHeight + 'px';
            elt.style.transition = transition_save;

            requestAnimationFrame(function() {
                elt.style.maxHeight = elt.getAttribute('max_height_init') + 'px';
                elt.removeAttribute('max_height_init');
                elt.style.maxHeight = null;
            });
        });

        clicked_cls(elt);
    }
}