JSFiddle - React, Tailwind, and code Playground

by Alexey Zuev

HTML

<ul class="main__list">
    <li class="main__item">
       <h2 class="main__item-title"><a href="#">Современные тенденции и требования по озеленению и ландшафтному дизайну гостиничных комплексов</a></h2>
       <div class="main__item-text">В современном мире огромное количество людей пользуется услугами средств размещения. Под влиянием человеческой природные комплексы в городах и их окрестностях подвергаются тяжелой нагрузке. Показатели результатов человеческой деятельности очень далеки от состояния экологического равновесия . </div>
   </li> 
   <li class="main__item">
       <h2 class="main__item-title"><a href="#">«Великая хартия вольностей». Содержание и значение.</a></h2>
       <div class="main__item-text">Предоставление услуг имеет свою историю, которая своими корнями уходит глубоко в прошлое. Но стоит заметить, что лишь в 60-х годах 20 века в западных странах им стали уделять особое внимание. Огромное количество людей трудятся в сфере сервиса. Для каждой организации необходимостью является изучение специфики сервиса услуг.</div>
   </li>
  </ul>

CSS

.main__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.main__item {
  padding-left: 80px;
  padding-right: 50px;
}

.main__item-title {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  margin-top: 20px;
  position: relative;
}

.main__item-title a {
  text-transform: uppercase;
  text-decoration: none;
  color: #3f9fc9;
  font-weight: bold;
}

.main__item-text {
  font-size: 14px;
  line-height: 21px;
  font-weight: normal;
  color: #666666;
  display: none;
}

.main__item-text.main_item--open {
    display: block;
}

JavaScript

(function(){
  var mainList = document.querySelector('.main__list');
    
  mainList.addEventListener('click', function (e) {
    var target = e.target;

    if(target.tagName != 'A') {
      return;
    }

    e.preventDefault();
    toggleText(target);
  });

  function toggleText(link) {
    var liItem = link.parentNode.parentNode,
      textItem = liItem.querySelector('.main__item-text');

    textItem.classList.toggle('main_item--open');
  }
})();