let AccordionMenu = function(selector) {

this.colMenu = document.querySelectorAll(`${selector} li`);
let This = this;
this.colMenu.forEach(function(items) {
    if (items.querySelector('ul')) {
        items.firstElementChild.insertAdjacentHTML('beforeend', '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 451.847 451.847" xml:space="preserve"> <g> <path d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751 c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0 c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/> </g> </svg>');

        items.firstElementChild.onclick = function(e) {
            e.preventDefault();

            let isTrue = this.parentElement.classList.toggle('open');

            if (isTrue) {
                This.show(this.nextElementSibling);
            } else {
                This.hide(this.nextElementSibling);
            }
        }
    } 
})

}

// Show an element AccordionMenu.prototype.show = function(elem) {

// Get the natural height of the element
var getHeight = function() {
    elem.style.display = 'block'; // Make it visible
    var height = elem.scrollHeight + 'px'; // Get it's height
    return height;
};

var height = getHeight(); // Get the natural height
elem.style.height = height; // Update the height

setTimeout(function() {
    elem.style.height = 'auto';
}, 350);

};

// Hide an element AccordionMenu.prototype.hide = function(elem) {

// Give the element a height to change from
elem.style.height = elem.scrollHeight + 'px';

// Set the height back to 0
setTimeout(function() {
    elem.style.height = '0';
}, 110);

setTimeout(function() {
    elem.style.display = '';
}, 700);

};