Я хочу, чтобы мой аккордеон закрывался, когда я щелкаю где-нибудь еще на странице

Question

Аккордеон должен автоматически закрываться, когда я нажимаю где-нибудь на странице.

Я буду использовать его только на мобильных устройствах, поэтому он должен работать на мобильных устройствах.

var acc = document.getElementsByClassName("accordion_mobile");
var i;

// Open the first accordion
// Add onclick listener to every accordion element
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function() {
        // For toggling purposes detect if the clicked section is already "active"
        var isActive = this.classList.contains("active");

        // Close all accordions
        var allAccordions = document.getElementsByClassName("accordion_mobile");
        for (j = 0; j < allAccordions.length; j++) {
            // Remove active class from section header
            allAccordions[j].classList.remove("active");

            // Remove the max-height class from the panel to close it
            var panel = allAccordions[j].nextElementSibling;
            var maxHeightValue = getStyle(panel, "maxHeight");

            if (maxHeightValue !== "0px") {
                panel.style.maxHeight = null;
            }
        }

        // Toggle the clicked section using a ternary operator
        isActive ? this.classList.remove("active") : this.classList.add("active");

        // Toggle the panel element
        var panel = this.nextElementSibling;
        var maxHeightValue = getStyle(panel, "maxHeight");

        if (maxHeightValue !== "0px") {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}

// Cross-browser way to get the computed height of a certain element. Credit to @CMS on StackOverflow (http://stackoverflow.com/a/2531934/7926565)
function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hypen separated words eg. font-Size)
        styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
        return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
    } else if (el.currentStyle) { // IE
        // sanitize property name to camelCase
        styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
            return letter.toUpperCase();
        });
        value = el.currentStyle[styleProp];
        // convert other units to pixels on IE
        if (/^\d+(em|pt|%|ex)?$/i.test(value)) {
            return (function(value) {
                var oldLeft = el.style.left,
                    oldRsLeft = el.runtimeStyle.left;
                el.runtimeStyle.left = el.currentStyle.left;
                el.style.left = value || 0;
                value = el.style.pixelLeft + "px";
                el.style.left = oldLeft;
                el.runtimeStyle.left = oldRsLeft;
                return value;
            })(value);
        }
        return value;
    }
}

CSS:

button.accordion_mobile {
    color: #ffffff;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion_mobile:after {
    display: none
}

button.accordion_mobile.active:after {
    content: "\2212";
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.acc_mobile {
  position: absolute;
  bottom:0px;
}

.yoga_mobile {
  background-color: rgba(215,66,41,0.8)!important;
}

.accommodation_mobile {
  background-color: rgba(231,96,47,0.85)!important;
}

.food_mobile {
  background-color: rgba(243,154,49,0.85)!important;
}

.paintball_mobile {
  background-color: rgba(137,172,162,0.9)!important;
}

.cable_mobile {
  background-color: rgba(61,152,164,0.85)!important;
}

.scuba_mobile {
  background-color: rgba(19,98,122,0.85)!important;
}

HTML:

<div class="acc_mobile"><button class="accordion_mobile yoga_mobile">YOGA</button>
    <div class="panel yoga_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile accommodation_mobile">ACCOMMODATION</button>
    <div class="panel accommodation_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile food_mobile">FOOD</button>
    <div class="panel food_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile paintball_mobile">PAINTBALL</button>
    <div class="panel paintball_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile cable_mobile">CABLE</button>
    <div class="panel cable_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion_mobile scuba_mobile">SCUBA</button>
    <div class="panel scuba_mobile">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Answer 1

addEventListener("click", function(a) {
    if (a.srcElement.className.indexOf('accordion_mobile') == -1) {
        var allAccordions = document.getElementsByClassName("accordion_mobile");
        for (j = 0; j < allAccordions.length; j++) {
            // Remove active class from section header
            allAccordions[j].classList.remove("active");

            // Remove the max-height class from the panel to close it
            var panel = allAccordions[j].nextElementSibling;
            var maxHeightValue = getStyle(panel, "maxHeight");

            if (maxHeightValue !== "0px") {
                panel.style.maxHeight = null;
            }
        }
    }
});

Fiddle: https://jsfiddle.net/fkdv5a67/