JSFiddle - React, Tailwind, and code Playground

by Ayvars

HTML

<div class="socialobes basis">
		<a href="#"><h2>Социальное обеспечение</h2></a>
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<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>
<li>право социального обеспечения</li>
<li>документы для оформления материнского капитала</li>
<li>программа молодой специалист на селе</li>
<li>выплаты за третьего ребенка в 2017 году</li>
<li>выплаты на третьего ребенка</li>
<li>родовой сертификат на первого ребенка</li>
<li>признание малоимущим</li>
<li>квота на операцию</li>
<li>обналичивание материнского капитала</li>
<li>региональный материнский капитал</li>
<li>пенсии и пособия</li>
<span class="closeli">скрыть</span>
</ul>
 </div>
</div>	
<div class="socialobes basis">
		<a href="#"><h2>Социальное обеспечение</h2></a>
  <ul>
   <li>подъёмные</li>
<li>индексация материнского капитала</li>
<li>бесплатная юридическая помощь многодетным семьям</li>
<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>
<li>право социального обеспечения</li>
<li>документы для оформления материнского капитала</li>
<li>программа молодой специалист на селе</li>
<li>выплаты за третьего ребенка в 2017 году</li>
<li>выплаты на третьего...

CSS

.fa-enter{
	opacity: 0;
}

.fa-enter-active{

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

}
.displaynone{
display: none;
}

JavaScript

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();
		});
	});
}