CSS, HTML: боковая панель с анимацией как 1 кнопка, а не как 2 ⇐ Jquery

[Anonymous]

У меня есть боковое меню с одной кнопкой M, которая открывает меню, но когда меню открывается, вместо 10 кнопок я получаю 20, например B-Button, B — изображение, а Button — текст. Когда меню открыто, это должна быть одна и та же кнопка, а не две отдельные кнопки. Я знаю, что они закодированы как две отдельные кнопки, но в каком направлении мне следует двигаться, чтобы сделать их одной кнопкой только тогда, когда меню открыто.
Код:

Код: Выделить всё

 function MenuButton() {
if (document.getElementById("mySidenav").style.width == "150px")
{
document.getElementById("mySidenav").style.width = "0px";
}
else {
document.getElementById("mySidenav").style.width = "150px";
}
}

Код: Выделить всё

.sidenav {
height: 100%;
width: 0;
position: fixed;
top: 34px;
left: 49px;
z-index: 2;
background-color: #111;
overflow: hidden;
transition: 0.5s;
padding-top: 55px;
}

.sidenav a {
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-weight: normal;
font-stretch: normal;
font-size: 25px;
line-height: 1;
padding: 8px 8px 8px 15px;
text-decoration: none;
display: block;
color: white;
transition: 0.3s;
white-space: nowrap;
}

.sidenav a:hover {
background-color: #3498db;
}

.buttons {
height: 100%;
width: 50px;
position: fixed;
margin: 0 auto;
top: 34px;
left: 0;
z-index: 1;
background-color: #111;
overflow: hidden;
transition: 0.5s;
padding-top: 14px;
}

.buttons a{
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-weight: normal;
font-stretch: normal;
font-size:25px;
line-height: 1;
padding: 8px 8px 8px 15px;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
cursor: pointer;
}

.buttons a:hover{
background-color: #3498db;
}

Код: Выделить всё

B
B
B
B
B
B
B
B
B
B

M

B
B
B
B
B
B
B
B
B
B

Ссылка JSFiddle

Подробнее здесь: https://stackoverflow.com/questions/496 ... n-not-as-2