Как на js сделать смену css классов при клике на кнопку?

Question

[Stacy None]

Есть шаблон на bootstrap. В нём использую сетку:

<div class="row">
 <div class="col-md-9" id="cont">контент</div>
 <div class="col-md-3" id="side">Сайдбар</div>
</div>

Нужно по клику на кнопку менять классы, чтобы получилось такое:

<div class="row">
 <div class="col-md-12" id="cont">контент</div>
 <div class="col-md-3 d-none" id="side">Сайдбар</div>
</div>

Чтобы у блока с id=cont менялось col-md-9 на col-md-12.
А у блока с id=side добавлялся класс d-none.
И по повторному клику чтобы классы возвращались обратно.

Answer 1

[0xD34F]

const content = document.querySelector('#cont');
const sidebar = document.querySelector('#side');
let state = false;

document.querySelector('button').addEventListener('click', () => {
  state = !state;
  content.classList.toggle('col-md-9',  !state);
  content.classList.toggle('col-md-12',  state);
  sidebar.classList.toggle('d-none',     state);
});

Comments

[Stacy None]

а кнопка ?

[0xD34F]

Stacy None, что кнопка?

[Stacy None]

0xD34F, Как приделать кнопку то ?)

[Stacy None]

0xD34F, У кнопки тоже есть id ="sidebtn"

[0xD34F]

Stacy None, селектор заменишь сам, как-нибудь уж сообразишь.

[Stacy None]

0xD34F, Не работает (

[0xD34F]

Stacy None, конечно же работает. Просто у кого-то руки настолько кривые, что даже кусок кода скопипастить не получается.

[Павел Корнилов]

0xD34F, да чё уж там, пиши уже полностью рабочий фрагмент =)
А то не работает...
Наверно, кнопка на input'е сделана...

[zendor]

Stacy None, Дело в том, что вы просите решение которое даже не в силах использовать. Вместо того чтобы заваливать глупыми вопросами лучше потратьте неделю на изучение простейших принципов языка.

[Abr_ya]

Stacy None,
1) document.querySelector('button').addEventListener('click', function() { ...
в коде, который вам предложили - это обработчик события клика по вашей кнопке
следовательно, пропишите в скобках свой селектор, вместо 'button',
2) используйте тот же console.log (внутри функции), чтобы убедиться, что вы повесили обработчик на свойю кнопку и он срабатывает,
3) когда с кнопкой разберетесь, все и так должно заработать, но я бы посоветовал вам посмотреть хоть вот тут, что у вас там делает classList , вдруг в какой-то момент решите что-то менять:
code.mu/javascript/dom/classList.html
В вашем примере сейчас все просто: по клику убираются классы, если они есть, добавляются, если их нет - хватает одного toggle.

Answer 2

[Сергей Сергей]

используй classList

Answer 3

[jamster]

classList.toggle('class-name') - если класса нет добавляет, если есть то убирает.
classList.add('class-name') - добавляет.