Интересно мнение о моем коде, и так же интересно как это будет выглядеть на javascript?
Сложно наговнокодить добавляя/удаляя классы.
В JS:
classList.add
classList.remove
и клик addEventListenter('click')
Элемент ищем document.querySelector();

Учить можно на javascript.ru или взять курс на udemy.com, к примеру...
Интересно мнение о моем коде
Сори за говнокод
function openhide(){
  document.querySelector('.hide_sett_passive').classList.add('hide_sett_active');
  document.querySelector('.hide_sett_passive').classList.remove('hide_sett_passive');
}

function closehide(){
  document.querySelector('.hide_sett_active').classList.add('hide_sett_passive');
  document.querySelector('.hide_sett_active').classList.remove('hide_sett_active');
}

function openprebook(){
  document.querySelector('.preblock_passive').classList.add('preblock_active');
  document.querySelector('.preblock_passive').classList.remove('preblock_passive');
}

function closeprebook(){
  document.querySelector('.preblock_active').classList.add('preblock_passive');
  document.querySelector('.preblock_active').classList.remove('preblock_active');
}

function open_prebooksItems1(){
  document.querySelector('.preblock_hs_itm1_passive').classList.add('preblock_hs_itm1_active');
  document.querySelector('.preblock_hs_itm1_passive').classList.remove('preblock_hs_itm1_passive');
}

function close_prebooksItems1(){
  document.querySelector('.preblock_hs_itm1_active').classList.add('preblock_hs_itm1_passive');
  document.querySelector('.preblock_hs_itm1_active').classList.remove('preblock_hs_itm1_active');
}

function close_when_all_close(){
  document.querySelector('.cl').addEventListener("click", function() {
    closehide();
    closeprebook();
    close_prebooksItems1();
  })
}

function MakeActive_hide_sett_passive(){
  document.querySelector('.shesterenki').addEventListener("click", function() {
    openhide();
  });
}

function click_hs_itm1(){
  document.querySelector('.hs_itm1').addEventListener("click", function() {
    openprebook();
    open_prebooksItems1();
  });
}

document.addEventListener("DOMContentLoaded", function() {
  close_when_all_close();
  MakeActive_hide_sett_passive();
  click_hs_itm1();
});