Good afternoon, your help is required. Made a side menu, in the main div registered:

id="sidebar"

And on the button that is above the above mentioned div has assigned a class:

 class="open"

Then I inserted a small JS code:

 var menuElem = document.getElementById('sidebar'); var sidebarElem = menuElem.querySelector('.open'); sidebarElem.onclick = function() { menuElem.classList.toggle('close'); };

In css I registered styles so that the side menu after clicking on the button was hidden by% so 90. Everything works wonderfully. But! When the menu is hidden, the main content remains in its place, and I need it to move exactly as much as I hide the sidebar and so that it will be immediately in one click. And not just the main content. Since you can insert one unique identifier in getElementById, how should you be able to interact with several elements?

I hope I described it clearly, I hope for your help!

  • one
    'querySelectorAll' to select multiple items. Apparently you have sidebar position fixed, you need to wrap it together with the rest of the content - Artem Gorlachev
  • Add html, css - HamSter
  • If I turn into one, but I still need to specify specific elements, how to do it? I am in JS not too strong. - Vladislav

1 answer 1

Population, start a class on the parent element, napimer on body calss .jsOpen, and from this class inherit css

 /* css */ .jsOpen.sidebar { свойства } .jsOpen.content { свойства } // JS $(document).ready(function() { $('.button').click(function(){ $('body').toggleClass('.jsOpen'); }); }