Переключение боковой панели с помощью классов CSS и JS ⇐ CSS

[Anonymous]

Я боролся с этим какое-то время, и яростное поиск в Google завел меня так далеко.
Я создал страницу, и, несмотря на мой сценарий, мне не удается заставить боковую панель исчезнуть.См. следующее

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

html {
margin-left: 0;
margin-top: 0;
}

table,
th,
td {
border: 1px solid;
}

#body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 300px auto;
grid-template-areas: 'menubtn header ' 'sidebar content' 'footer footer';
}

#menubtn {
grid-area: menubtn;
position: sticky;
top: 0;
height: 3rem;
}

#header {
grid-area: header;
background-color: white;
position: sticky;
top: 0;
height: 3rem;
}

#sidebar {
grid-area: sidebar;
background-color: white;
position: sticky;
height: calc(100vh -3rem);
align-self: start;
}

#sidebar.hidden {
display: hidden;
}

content {
grid-area: content;
}

#footer {
grid-area: footer;
background-color: white;
}

h1 {
color: #330099;
}

h2 {
color: #330099;
}

h3 {
color: #330099;
}

a:link,
a:visited {
color: #FFF;
font-weight: bold;
background-color: #09F;
border: 1px solid #0066cc;
padding: 3px;
text-decoration: none
}

#content a:link {
color: #FFF;
font-weight: bold;
background-color: #09F;
border: 1px solid #0066cc;
padding: 1px;
text-decoration: none
}

#content a:visited {
color: #FFF;
font-weight: bold;
background-color: #09F;
border: 1px solid #0066cc;
padding: 1px;
text-decoration: none
}

a:hover {
background-color: #06C
}

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

[*]

Test page for toggling menu







Toggle menu

Welcome to my test page

[list]
this
[*]item
[*]tests
[*]the
[*]button
[/list]

welcome again!
this page has been created to test my button to toggle menus. I've put another sentence here just to check whether or not the content area is expanded when the menu is hidden.




function myFunc() {
let sb = document.getElementById("#sidebar");
sb.classList.toggle("hidden");
}

Меня смущает пара вещей, которые могут помочь найти любую помощь в правильном направлении. Не уверен, что мой скрытый класс правильно определен. Кроме того, вы заметите, что я не использовал семантические теги. что мне нужно изменить, чтобы это произошло?
Большое спасибо.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ses-and-js