[babulya]

Доброго дня. Я js-дно) - камнями не кидать (ссылка на codepen внизу)
Подскажите плиз как правильно написать код js, он в принципе работает так как нужно, но мне кажется это возможно неправильный подход + можно сделать проще и короче, может сделать 1 слушатель на это все.

Идея в том, чтобы по клику на вход/регистрация появлялась модалка с формами. При клике на вход нужно вешать доп класс (убирает бордер) на элемент в модальном окне со ссылкой "вход" + вешать класс (show - display:block) на соответствующую форму, и соответственно тоже по клику на регистрация - убираем бордер в модалке у ссылка регистрация и показываем форму реги.

Ну и при переключении уже в открытой модалке довешивать/убирать соответствующие классы

<nav class="user-block">
            <ul class="user-block-menu">
              <li class="user-block-menu__item">
                <span class="icon-login">
                  <a href="#" data-user="entry" class="user-block-menu__link">Вход</a>
                </span>
              </li>
              <li class="user-block-menu__item">
                <span class="icon-reg">
                  <a href="#" data-user="reg" class="user-block-menu__link">Регистрация</a>
                </span>
              </li>
            </ul>
            <div class="user-modal">
              <ul class="user-modal__menu">
                <li class="user-modal__item"><a class="user-modal__link" id="entry" href="#" data-link="entry">Вход</a></li>
                <li class="user-modal__item"><a class="user-modal__link" id="reg" href="#" data-link="reg">Регистрация</a></li>
              </ul>
              <div class="user-modal__entry">
                <form action="" class="user-modal__form" method="post">
                  <input class="user-modal__email-entry" type="email" name="email-entry" placeholder="Email">
                  <input class="user-modal__password-entry"  type="password" name="password-entry" placeholder="Пароль">
                  <input class="user-modal__submit-entry" type="submit" name="submit-entry" value="Войти">
                </form>
              </div>

              <div class="user-modal__reg">
                <form action="" class="user-modal__form" method="post">
                  <input class="user-modal__name-reg" type="text" name="name" placeholder="Имя">
                  <input class="user-modal__email-reg" type="email" name="email" placeholder="Email">
                  <input class="user-modal__password-reg" type="password" name="password" placeholder="Пароль">
                  <input class="user-modal__password-reg" type="password" name="password-confirm" placeholder="Пароль">
                  <input class="user-modal__submit-reg" type="submit" name="submit-reg" value="Войти">
                </form>
              </div>
            </div>
          </nav>

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
    modalCategory = document.querySelector('.category-wrap'),//категории модалка
    linkAllCat    = document.querySelector('.link-all-cat'),//ссылка на главной на модалку категорий
    modalClose    = document.querySelector('.modal-close'),//закрываха модалки
    userModal     = document.querySelector('.user-modal'),//модалка вход/рега
    userModalMenu = document.querySelector('.user-modal__menu'),//слушатель вход/рега внутри модалки
    userBlockMenu = document.querySelector('.user-block-menu'),//слушатель вход/рега на ссылках
    entryForm     = document.querySelector('.user-modal__entry'),//форма входа в модалке
    regForm       = document.querySelector('.user-modal__reg'),//форма реги в модалке
    regId         = document.querySelector('#reg'),//ссылка реги в модалке
    entryId       = document.querySelector('#entry');//ссылка входа в модалке

var removeClass = function(elem, className) {
  if(className === undefined) {
    className = 'show';
  }
  if(elem.classList.contains(className)) {
    elem.classList.remove(className);
  }
}

var addRemoveClass = function(elem1, elem2, className) {
  if(className === undefined) {
    className = 'show';
  }
  elem1.classList.remove(className);
  elem2.classList.remove(className);
  elem1.classList.add(className);
} 

userBlockMenu.addEventListener('click', function(event) {
  event.preventDefault();
  if(userModal){
    userModal.classList.contains('show') ? 
    userModal.classList.remove('show') + userModal.classList.remove('animate-user-modal') : 
    userModal.classList.add('show') + userModal.classList.add('animate-user-modal');
  }
  var elem = event.target,
      dataUser = elem.getAttribute('data-user'),
      dataLink = elem.getAttribute('data-link');


  if(dataUser) {
    if(dataUser === 'entry') {
      addRemoveClass(entryForm, regForm);
      addRemoveClass(entryId, regId, 'user-modal__link_active');
    } else if(dataUser === 'reg') {
      addRemoveClass(regForm, entryForm);
      addRemoveClass(regId, entryId, 'user-modal__link_active');
    }
  }
});

userModalMenu.addEventListener('click', function(event) {
  event.preventDefault();
  var elem = event.target,
      dataLink = elem.getAttribute('data-link');
  if(dataLink) {
    if(dataLink === 'entry') {
      addRemoveClass(entryForm, regForm);
      addRemoveClass(entryId, regId, 'user-modal__link_active');
    } else if(dataLink === 'reg') {
      addRemoveClass(regForm, entryForm);
      addRemoveClass(regId, entryId, 'user-modal__link_active');
    }
  }
});

http://codepen.io/babulya/pen/QKyrxw