Второй раз функция вызывается некорректно

[floody]

Здравствуйте. Пытаюсь сделать анимацию на js.
Все работает, но только один раз. При повторном клике функция работает уже начинает работать некорректно.
Необходимо сделать список(див), который будет появляться когда нажимаешь на обработчик1(.openli), на обработчик2(.closeli) должен исчезать.
На второй раз, когда нажимаешь на обработчик, див(список) появляется и сразу же исчезает. Будто обработчик2 нажимается автоматически при клике на обработчик1.

Все это я получаю путем добавления CSS: opacity и transition;
Если не понятно, перейдите по ссылке и попробуйте два раза открыть и закрыть список
Ссылка на песочницу https://jsfiddle.net/Ayvars/fjzc2ekz/3/#run

<div class="socialobes basis">
		<a href="#"><h2>Социальное обеспечение</h2></a>
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<li>оплата учебы материнским капиталом</li>
</ul>
       <span class="openli">показать все</span>
     
       <div class="openall">

        <ul><li>социальная стипендия</li>
<li>бесплатная юридическая помощь детям сиротам</li>
<li>региональный материнский капитал</li>
<li>пенсии и пособия</li>
<span class="closeli">скрыть</span>
</ul>
 </div>
</div>

.fa-enter{
	opacity: 0;
}

.fa-enter-active{

	transition: opacity 1s;
}
.fa-leave-active{
	transition: opacity 1s;
	opacity:0
  }
  .displayblock{
	display:block;

}
.displaynone{
display: none;
}

var seeall = document.querySelectorAll('.openli');


for (var i = 0; i < seeall.length; i++)  {


seeall[i].addEventListener('click',  function(){
var blockli = this.parentElement.children[3];

this.classList.add('fa-leave-active');
this.style.display = 'none';
this.classList.remove('fa-leave-active');


var handler = function(){
	blockli.classList.remove('fa-enter-active');
	blockli.removeEventListener('transitionend', handler);

};

blockli.style.display = 'block';
blockli.classList.add('fa-enter');
raf(function(){
	blockli.classList.remove('fa-enter');
blockli.classList.add('fa-enter-active');

blockli.addEventListener('transitionend', handler);
});



});
};


var closeall = document.querySelectorAll('.closeli');

for (i = 0; i < closeall.length; i++){
	closeall[i].addEventListener('click',  function(){
var handler2 = function(){
	sellallinhide.classList.remove('fa-enter-active');
	sellallinhide.removeEventListener('transitionend', handler2);

};
var hideall = this.parentElement.parentElement;
var parentforhide = this.parentElement;
var sellallinhide = parentforhide.parentElement.parentElement.children[2];
this.style.display = 'none';
hideall.classList.add('fa-leave-active');
hideall.addEventListener('transitionend', function(){
hideall.style.display = 'none';
hideall.classList.remove('fa-leave-active');
sellallinhide.style.display = 'block';
sellallinhide.classList.add('fa-enter');
raf(function(){
sellallinhide.classList.add('fa-enter-active');
sellallinhide.classList.remove('fa-enter');
sellallinhide.addEventListener('transitionend', handler2);

});

});
console.log(this.parentElement.parentElement);



});
}

function raf(fn){
	window.requestAnimationFrame(function(){
		window.requestAnimationFrame(function(){

		fn();
		});
	});
}

[Andrey163783]

var btn1 = document.querySelector('.btn');
var hide = document.querySelector('.hide');

function openAndClose(elem, add){
  if(add){
    elem.classList.add('active');
  }else{
    elem.classList.remove('active');
  }
}

btn1.onclick = function(){
  var list = document.querySelector('.list');
  openAndClose(list,true)
}
hide.onclick = function(){
  var list = document.querySelector('.list');
  openAndClose(list,false);
}

делай разные классы

https://codepen.io/Andreydesign/pen/RQBjqo?editors=1111