-1

I've tried to use the removeEventListener with the opposite marks but that didn't work. I've also tried the if/else statement but that doesn't seem to work either. I know I must be missing something. Here is my code:

const toggler = document.querySelector('.toggler');
const sideBar = document.querySelector('.sidebar')
const links = document.querySelector('.nav-links');
const content = document.querySelector('body')
const menu = document.querySelector('.menu-toggler')

toggler.addEventListener('click', function openSideBar() {
  sideBar.style.width = '200px';
  sideBar.style.transition = ' all 1000ms';
  links.style.left = '70px';
  content.style.marginLeft = '200px';
  content.style.transition = 'all 1000ms';
  menu.style.marginLeft = '150px';
})
<div class="menu">
  <h1>Move It over</h1>
  <div class="menu-toggler">
    <input type="checkbox" class="toggler">
  </div>
  <div class="sidebar">
    <ul class="nav-links">
      <li class="nav-link"><a href="">Home</a></li>
      <li class="nav-link"><a href="">About</a></li>
      <li class="nav-link"><a href="">Services</a></li>
      <li class="nav-link"><a href="">Contact</a></li>
    </ul>
  </div>
</div>
Tigerrrrr
  • 526
  • 6
  • 24
Alanaj
  • 237
  • 2
  • 12
  • The better approach here is to add/remove a css class that transitions from open to close. In the current setup, your code doesn't offer logic to collapse the sidebar. – silencedogood Mar 23 '20 at 15:34
  • Check this [stackblitz](https://stackblitz.com/edit/js-ompwcg?file=index.js) – robert Mar 23 '20 at 15:35
  • @robert That code worked beatifully but I don't understand why it worked. That's my problem. – Alanaj Mar 23 '20 at 15:41
  • This line `const checked = toggler.checked;` will get the current checked status every time you click on the checkbox. Below you have a simple `if` statement and the only difference is these lines: `content.style.marginLeft = "200px";` and in else `content.style.marginLeft = "0px";` This will trigger the "back" animation. Also consider the answer below it is far more better approach. – robert Mar 23 '20 at 15:51
  • @robert thank you for the explanation and thanks for the help. – Alanaj Mar 23 '20 at 16:14

1 Answers1

0

The best approach will be just to add/remove a class on click

Make a class .open and add the properties to it. List all the properties you want to for parent and child class.

.open{
width:200px;
transition :  all 1000ms;
}

.open .nav-link{
left:70px;
}

JS Can be simplified to

const sideBar = document.querySelector('.sidebar')

toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open');
});
damnitrahul
  • 150
  • 1
  • 6