Q:

Toggling burger menu on one pager after click

How can I get my one pager burger menu to toggle after click on #div/href?
The toggle function works fine on click at the actual burger "bars" but does not toggle when click on a menupoint. 
The burger menu is made with and input checkbox and almost pure CSS.
The problem might be very simple, but I'm new at coding and cannot wrap my head around this one - hope anyone are able to help :)  

function functionBurger(x) {
    x.classList.toggle("change");
}
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/* NAV  TOGGLE */

label {
    cursor: pointer;
}

#menu-toggle {
    display: none;
    /* hide the checkbox */
}

#menu {
    display: none;
}

#menu-toggle:checked + #menu {
    display: block;
}
<div class="test">
    <div class="left"></div>
    <label for="menu-toggle">
        <div class="burger_menu">
            <div class="container" onclick="functionBurger(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </div>
    </label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu">
        <li><a href="#hjem_container">HJEM</a></li>
        <li><a href="#room_container">ROOMS</a></li>
        <li><a href="#book_container">BOOK</a></li>
        <li><a href="#kontakt_container">KONTAKT</a></li>
        <li><a href="#gavekort_container">GAVEKORT</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a class="english" href="#">In English</a></li>
    </ul>
</div>

A:

You need to attach an event listener to each item that needs to be toggled.

function functionBurger(x) {
    x.classList.toggle("change");
}

document.querySelectorAll('#menu a').forEach(function(item) {
    item.onclick = function () {
        document.getElementById('menu-toggle').checked = !document.getElementById('menu-toggle').checked
        document.querySelector('.burger_menu .container').classList.toggle('change')
    }
})
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}
/* NAV  TOGGLE */

label {
    cursor: pointer;
}

#menu-toggle {
    display: none;
    /* hide the checkbox */
}

#menu {
    display: none;
}

#menu-toggle:checked + #menu {
    display: block;
}
<div class="test">
    <div class="left"></div>
    <label for="menu-toggle">
        <div class="burger_menu">
            <div class="container" onclick="functionBurger(this)">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
            </div>
        </div>
    </label>
    <input type="checkbox" id="menu-toggle" />
    <ul id="menu">
        <li><a href="#hjem_container">HJEM</a></li>
        <li><a href="#room_container">ROOMS</a></li>
        <li><a href="#book_container">BOOK</a></li>
        <li><a href="#kontakt_container">KONTAKT</a></li>
        <li><a href="#gavekort_container">GAVEKORT</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a class="english" href="#">In English</a></li>
    </ul>
</div>

