JavaScript Toggle Classes Onclick

Question

Я строю навигацию по боковой панели в приложении Rails и, естественно, мне нужно использовать JS, чтобы разрешить подменю на боковой панели. У меня так, что он в основном работает с использованием jQuery с точки зрения применения правильного стиля и работает на других страницах (но не на домашней странице, а это отдельная проблема). Я пытаюсь понять, как писать код на обычном JS вместо jQuery.

$(document).ready(function () {

$('#sidebarCollapse').on('click', function () {
    $('#sidebar').toggleClass('active').toggleClass('col-lg-2 col-md-2');
    $('#dash-wrapper').toggleClass('col-lg-11').removeClass('col-lg-9');
    $('#sidebar').toggle();
 });

});

Я подумал о том, чтобы поставить на мою ссылку функцию onclick и сослаться на следующий код:

function sideSwitch (){
  var side = document.getElementById('sidebarCollapse');
  var dash = document.getElementById('dash-wrapper');
  var bar = document.getElementById('sidebar');
  bar.classList.toggle('active').toggle('col-lg-2 col-md-2');
  dash.classList.toggle('col-lg-11').removeClass('col-lg-9');
  bar.toggle();
}

По моей ссылке у меня есть:

<%=link_to image_tag('products.png') + 'Products', '/', class: 'nav-link d-flex align-items-center flex-column sidebar side-links', id: 'sidebarCollapse', data: { toggle: 'collapse', target: '#submenu'}, :onclick => 'sideSwitch()'%>

Это не работает. Это не срабатывает.

Answer 1

Чистая реализация JavaScript из toggle и toggleClass

function toggle(ele,className){

   if(!className){
     ele.style.display = ele.style.display === "" ? "none" : ""; 
     return;
   }
   if(ele.classList.contains(className)){
      ele.classList.remove(className);
   }else{
        ele.classList.add(className);
   }
}

function sideSwitch(){
   var sidebar = document.getElementById('sidebar');
   var dashWrapper = document.getElementById('dash-wrapper');
   toggle(sidebar,'active');
   toggle(sidebar,'col-lg-2');
   toggle(sidebar,'col-md-2');
   toggle(dashWrapper,'col-lg-11');
   toggle(dashWrapper,'col-lg-9');
   toggle(dashWrapper);

}