VanillaJs way of toggling with font awesome bars and close icons

toggler.js

var $ = function (selector, parent) {
  return (parent ? parent : document).querySelector(selector);
};

(function () {
  $('[data-toggle="offcanvas"]').addEventListener("click", function () {
    $(".offcanvas-collapse").classList.toggle("open");
  });

  $('[data-toggle="offsection"]').addEventListener("click", function () {
    var toggler = $(".offcanvas-section-collapse").classList.toggle("open");
    if (toggler) {
      $("span.toggler > i").classList.remove("fa-bars");
      $("span.toggler > i").classList.add("fa-close");
    } else {
      $("span.toggler > i").classList.remove("fa-close");
      $("span.toggler > i").classList.add("fa-bars");
    }

  });
})();