Converting Jquery sidenav into vanilla js

Question

I'm pretty familiar with jquery but im trying to learn vanilla js. How would I go about converting this jquery snippet into vanilla JS?

(function($) {
  $(function() { // DOM Ready

    // Toggle navigation
    $('#nav-toggle').click(function() {
      this.classList.toggle("active");
      // If sidebar is visible:
      if ($('body').hasClass('show-nav')) {
        // Hide sidebar
        $('body').removeClass('show-nav');
      } else { // If sidebar is hidden:
        $('body').addClass('show-nav');
        // Display sidebar
      }
    });
  });
})(jQuery);

document ready -> [DOMContentLoaded event](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded). `$('#nav-toggle')` -> `document.getElementById()`. `.click` -> `addEventListener`. `hasClass` / `removeClass` / `addClass` -> [Element.classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) — Phil, Feb 14 '18 at 22:57
What have you tried? If we do the work for you, how are you learning? Apparently you didn't learn anything the last time you asked a similar question: https://stackoverflow.com/questions/42592157/convert-animated-jquery-side-nav-to-vanilla-js — jmoerdyk, Feb 14 '18 at 23:03
Possible duplicate of [Is there an easy way to convert jquery code to javascript?](https://stackoverflow.com/questions/978799/is-there-an-easy-way-to-convert-jquery-code-to-javascript) — Heretic Monkey, Feb 14 '18 at 23:03

Ele · Accepted Answer · 2018-02-14T23:06:52.047

1

This is the vanilla js version

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('nav-toggle').addEventListener('click', function() {
      this.classList.toggle("active");

      var body = document.querySelector('body');
      // If sidebar is visible:
      if (body.classList.contains('show-nav')) {
        // Hide sidebar
        body.classList.remove('show-nav');
      } else { // If sidebar is hidden:
        body.classList.add('show-nav');
        // Display sidebar
      }
    });
});

Resources

edited Feb 14 '18 at 23:06

answered Feb 14 '18 at 22:57

Ele

33,468
7
37
75

FYI, you're missing the _"document ready"_ part – Phil Feb 14 '18 at 22:59
1

`var body = document.querySelector('body');` ... or just `var body = document.body;` – Jaromanda X Feb 14 '18 at 23:00
1

no, not even with IIFE is it same as `$(function() { // DOM Ready` – Jaromanda X Feb 14 '18 at 23:01
@phil some people downvote to discourage answers on lazy questions – jmoerdyk Feb 14 '18 at 23:04
2

The whole _"if has class, remove else add class"_ can be simplified to `document.body.classList.toggle('show-nav')` – Phil Feb 14 '18 at 23:04
@jmoerdyk seems misguided. Downvote the question, not the answer especially if there's nothing technically wrong with it – Phil Feb 14 '18 at 23:04
@Ele eh, just a suggestion – Phil Feb 14 '18 at 23:05
@Phil meh, it's their vote to waste. But I kind of agree that we shouldn't encourage lazy posters – jmoerdyk Feb 14 '18 at 23:08

Converting Jquery sidenav into vanilla js

1 Answers1

Resources