Как сократить код?
 

Доброго дня. Я js-дно) - камнями не кидать:) (ссылка на codepen внизу)
Подскажите плиз :help: как правильно написать код 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

модальное окно (вход/регистрация)
 

babulya,

<!DOCTYPE html><html class=''>
<head>

<meta charset='UTF-8'>
<style class="cp-pen-styles">
.user-block {
  position: relative;
  margin: 0 auto;
  width: 300px;
}

.user-block-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.user-block-menu__item {
  margin-right: 40px;
}
.user-block-menu__item span {
  display: block;
  position: relative;
}
.user-block-menu__item span.icon-login::before, .user-block-menu__item span.icon-reg::before {
  position: absolute;
  top: 50%;
  left: -19px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
}
.user-block-menu__item span.icon-login::before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 1896.0833" version="1.0" fit="" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: inline-block;"><path d="M1184 896q0 26-19 45l-544 544q-19 19-45 19t-45-19-19-45v-288H64q-26 0-45-19t-19-45V704q0-26 19-45t45-19h448V352q0-26 19-45t45-19 45 19l544 544q19 19 19 45zm352-352v704q0 119-84.5 203.5T1248 1536H928q-13 0-22.5-9.5T896 1504q0-4-1-20t-.5-26.5 3-23.5 10-19.5 20.5-6.5h320q66 0 113-47t47-113V544q0-66-47-113t-113-47H936l-11.5-1-11.5-3-8-5.5-7-9-2-13.5q0-4-1-20t-.5-26.5 3-23.5 10-19.5T928 256h320q119 0 203.5 84.5T1536 544z"></path></svg>');
}
.user-block-menu__item span.icon-reg::before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1792 1896.0833" version="1.0" fit="" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" style="pointer-events: none; display: inline-block;"><path d="M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1L945 815q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5T1120 1536H288q-119 0-203.5-84.5T0 1248V416q0-119 84.5-203.5T288 128h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6H288q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672H640V992zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z"></path></svg>');
}
.user-block-menu__link {
  font-size: 16px;
  color: #000;
  text-decoration: none;
  position: relative;
}
.user-block-menu__link::before {
  position: absolute;
  left: 0;
  top: 1px;
  content: "[";
  opacity: 0;
  transform: translateX(-20px);
  transition: transform 0.3s, opacity 0.2s;
}
.user-block-menu__link::after {
  position: absolute;
  top: 1px;
  right: 10px;
  content: "]";
  opacity: 0;
  transform: translateX(12px);
  transition: transform 0.3s, opacity 0.2s;
}
.user-block-menu__link:hover::after {
  opacity: 1;
  transform: translateX(22px);
}
.user-block-menu__link:hover::before {
  opacity: 1;
  transform: translateX(-30px);
}

@keyframes animate-user-modal {
  0% {
    -webkit-transform: translate(45%, -300px);
    transform: translate(45%, -300px);
  }
  100% {
    -webkit-transform: translate(45%, 0);
    transform: translate(45%, 0);
  }
}
.animate-user-modal {
  -webkit-animation: animate-user-modal 0.6s;
  animation: animate-user-modal 0.6s;
}

.user-modal {
  position: absolute;
  left: -100%;
  top: 30px;
  z-index: 1;
  width: 300px;
  margin: 0 auto;
  padding: 10px 0;
  border: 1px solid #d9ecfb;
  box-shadow: 0 0 6px 3px #ccc;
  background: #fff;
  display: none;
  transform: translate(45%, 0);
}
.user-modal::before {
  position: absolute;
  top: -20px;
  left: 50%;
  z-index: 1;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent;
  border-bottom-color: #fff;
  transform: translateX(-50%);
}
.user-modal::after {
  position: absolute;
  top: -22px;
  left: 50%;
  content: "";
  width: 0;
  height: 0;
  border: 11px solid;
  border-color: transparent;
  border-bottom-color: #d9ecfb;
  transform: translateX(-50%);
}
.user-modal__menu {
  position: relative;
  width: 100%;
  margin: 10px auto 20px;
  padding: 0;
  list-style: none;
}
.user-modal__menu::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  content: "";
  height: 1px;
  background: #ccc;
}
.user-modal__menu::after {
  content: "";
  display: table;
  clear: both;
}
.user-modal__item {
  border: 1px solid #ccc;
  border-bottom: 0;
}
.user-modal__item:first-child {
  margin-left: 20px;
  float: left;
}
.user-modal__item:last-child {
  margin-right: 20px;
  float: right;
}
.user-modal__link {
  position: relative;
  z-index: 2;
  display: block;
  padding: 5px 10px;
  font: 18px sans-serif;
  background: #fff;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  color: #000;
  text-decoration: none;
}
.user-modal__link.user-modal__link_active {
  border-bottom: 1px solid transparent;
}
.user-modal__entry, .user-modal__reg {
  width: 90%;
  margin: 0 auto;
  display: none;
}
.user-modal__form {
  display: flex;
  flex-direction: column;
}
.user-modal__form input {
  display: block;
  padding: 5px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  outline: 0;
}

.show {
  display: block;
}
</style></head><body>
<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>

<script>
var userModal = document.querySelector(".user-modal");
[].forEach.call(document.querySelectorAll(".user-block-menu__link"), function(item, i) {
    item.addEventListener("click", function(event) {
        event.preventDefault();
        userModal.classList.toggle("animate-user-modal");
        userModal.classList.toggle("show");
        link[i].click()
    })
});
var divForm = userModal.querySelectorAll("div"),
    link = userModal.querySelectorAll(".user-modal__link");
[].forEach.call(link, function(item, i) {
         var k = +!i;
    item.addEventListener("click", function(event) {
        event.preventDefault();
        link[i].classList.add("user-modal__link_active");
        divForm[i].classList.add("show");
        link[k].classList.remove("user-modal__link_active");
        divForm[k].classList.remove("show")
    })
});
</script>
</body></html>

Я конечно подозревал, что можно короче или по-другому, но это что-то непостижимое) ничего не ясно, [] - впервые вообще вижу. В своем ***-но коде (как я понял это именно он) я хотя бы понимал что делаю:)

Пойду искать о чем читать)

Спасибо большенное)

Спасибо добрый человек)