[Decode]

<style>
    .sub-menu {
        display: none;
    }
</style>
<ul class="accordeon">
    <li><a class="btn-menu" href="#">Верхний пункт</a>
        <ul class="sub-menu">
            <li><a class="sub-menu__item" href="#">Первое меню 1</a></li>
            <li><a class="sub-menu__item" href="#">Первое меню 2</a></li>
            <li><a class="sub-menu__item" href="#">Первое меню 3</a></li>
            <li><a class="sub-menu__item" href="#">Первое меню 4</a></li>
        </ul>
    </li>

    <li><a class="btn-menu" href="#">Средний пункт</a>
        <ul class="sub-menu">
            <li><a class="sub-menu__item" href="#">Второе меню 1</a></li>
            <li><a class="sub-menu__item" href="#">Второе меню 2</a></li>
            <li><a class="sub-menu__item" href="#">Второе меню 3</a></li>
            <li><a class="sub-menu__item" href="#">Второе меню 4</a></li>
        </ul>
    </li>

    <li><a class="btn-menu" href="#">Нижний пункт</a>
        <ul class="sub-menu">
            <li><a class="sub-menu__item" href="#">Третье меню 1</a></li>
            <li><a class="sub-menu__item" href="#">Третье меню 2</a></li>
            <li><a class="sub-menu__item" href="#">Третье меню 3</a></li>
            <li><a class="sub-menu__item" href="#">Третье меню 4</a></li>
        </ul>
    </li>
</ul>

<script>
    var ul = document.querySelector('.accordeon'),
        subMenu = document.querySelectorAll('.sub-menu'), curr;

    ul.addEventListener('click', function(e) {
        if( !e.target.classList.contains('btn-menu') ) return;

        curr = e.target.parentNode.querySelector('.sub-menu');

        curr.style.display = curr.offsetHeight ? 'none' : 'block';

        [].forEach.call(subMenu, function(item) {
            if(item == curr) return;
            item.style.display = 'none';
        });

        e.preventDefault();
    });
</script>