I am still relatively inexperienced with Javascript

Question...is it possible to re-add an event listener? I have a page I am trying to get to slide out of the browser window, but then back in on click, requiring (I think?) that I take off the re-add an event listener. my entire set up might be wrong. I hope i am asking the right question.

As of now it behaves properly until it comes time to re-add the event listener.

thoughts?

window.onload = function() {
  var $toggle = document.getElementById('toggle');
  var $back_messages = document.getElementById('back_list');
  var swipeMotion = function() {
    var isOpen = $toggle.classList.contains('slide-in');

    $toggle.removeEventListener('click', swipeMotion);
    $toggle.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
  };

  $toggle.addEventListener('click', swipeMotion);

  $back_messages.addEventListener('click', function() {
    var isOpen = $toggle.classList.contains('slide-out');

    $toggle.setAttribute('class', isOpen ? 'slide-in' : 'slide-out');

  });

  $toggle.addEventListener('click', swipeMotion);
}

<main>
  <div class="slide-in" id="toggle">

    <div class="container-fluid">
      <div class="row">
        <header>
          <h1>Abberant Artist - Paula Bailey UI Designer</h1>
        </header>
      </div>
      </a>
      <div class="row incoming_message">
        <icon>hi an icon of the "person sending the thing</icon>
        <div>
          <p> short description in gray-ish tones of what its about, with ellipses on the end... </p>
        </div>
      </div>
      <div class="row incoming_message">
        <icon>About</icon>
        <div>
          <p> Hey, here's that info you wanted... </p>
        </div>
      </div>

<!-- ... -->