toggle menus with the 'width' property

Issue

I´m working on a onlineshop and want to have two toggle menus on each side of the shop.

When I click on 'personal' or 'shopping cart' the toggle menus open. And when I click on 'back' they close again
( see images below ).

So my problem is, that on the right side, it works well, but on the left the text inside the toggle menu will not disapear after closing the menu ( see images below ).

I´m working with the 'width' property here. So when I'm clicking on 'back' the width will be set to '0px'. And ´whe clicking on 'personal' or 'shopping cart' the width will be set to '285px'

( I'm working with 'width' because I want to have a transition )

Here's my code:

html:

<div id="personal_toggle_menu">

            <div id="back_toggle_menu_personal" class="back_toggle_menu">back</div>
            <ul class="toggle_menu_ul">

                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>

            </ul>

        </div>

        <!-- toggle menu shopping cart  -->

        <div id="shopping_cart_toggle_menu">

            <div id="back_toggle_menu_shopping_cart" class="back_toggle_menu">back</div>
            <ul class="toggle_menu_ul">

                <li>test</li>
                <li>test</li>
                <li>test</li>
                <li>test</li>

            </ul>

        </div>

css:

/*todo toggle menu personal */

#personal_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid black;
    background-color: white;
    text-align: left;
}

/*todo toggle menu shopping cart */

#shopping_cart_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid black;
    background-color: white;
    text-align: right;
}

js:

/* toggle menu show */

function nav_toggle_personal()
{
    if (nav_toggle_status_personal = true)
    {
        toggle_personal_style.style.width = "285px";
        toggle_personal_style.style.transition = "width 0.5s";
    }
}

function nav_toggle_shopping_cart()
{
    if (nav_toggle_status_shopping_cart = true)
    {
        toggle_shopping_cart_style.style.width = "285px";
        toggle_shopping_cart_style.style.transition = "width 0.5s";
    }
}

nav_personal_img.addEventListener("click", nav_toggle_personal);
nav_shopping_cart_img.addEventListener("click", nav_toggle_shopping_cart);

/* toggle menu back */

function nav_toggle_personal_back()
{
    if (nav_toggle_status_personal = true)
    {
        toggle_personal_style.style.width = "0px";
        toggle_personal_style.style.transition = "width 0.5s";
    }
}

function nav_toggle_shopping_cart_back()
{
    if (nav_toggle_status_shopping_cart = true)
    {
        toggle_shopping_cart_style.style.width = "0px";
        toggle_shopping_cart_style.style.transition = "width 0.5s";
    }
}

nav_personal_back.addEventListener("click", nav_toggle_personal_back);
nav_shopping_cart_back.addEventListener("click", nav_toggle_shopping_cart_back);

Solution

Put overflow: hidden in the menu css.

#personal_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border-right: 1px solid black;
    background-color: white;
    text-align: left;
    overflow: hidden;
}

/*todo toggle menu shopping cart */

#shopping_cart_toggle_menu
{
    height: 100%;
    width: 0px;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid black;
    background-color: white;
    text-align: right;
    overflow: hidden;
}

Answered By - Jello