Некоректная работа спойлера?

Question

Консоль выдает ошибку Uncaught TypeError: Cannot set properties of null (setting 'hidden')" если в спойлере нет контента, но заголовок есть. Как можно исправить это? что-бы если не было у спойлера контента он все равно работал. Спасибо за помощь, в js еще не силен

https://jsfiddle.net/ktpcmja0/16/

function spollers() {
   const spollersArray = document.querySelectorAll('[data-spollers]');
   if (spollersArray.length > 0) {
     // Получение обычных слойлеров
     const spollersRegular = Array.from(spollersArray).filter(function(item, index, self) {
       return !item.dataset.spollers.split(",")[0];
     });
     // Инициализация обычных слойлеров
     if (spollersRegular.length) {
       initSpollers(spollersRegular);
     }
     // Получение слойлеров с медиа запросами
     let mdQueriesArray = dataMediaQueries(spollersArray, "spollers");
     if (mdQueriesArray && mdQueriesArray.length) {
       mdQueriesArray.forEach(mdQueriesItem => {
         // Событие
         mdQueriesItem.matchMedia.addEventListener("change", function() {
           initSpollers(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia);
         });
         initSpollers(mdQueriesItem.itemsArray, mdQueriesItem.matchMedia);
       });
     }
     // Инициализация
     function initSpollers(spollersArray, matchMedia = false) {
       spollersArray.forEach(spollersBlock => {
         spollersBlock = matchMedia ? spollersBlock.item : spollersBlock;
         if (matchMedia.matches || !matchMedia) {
           spollersBlock.classList.add('_spoller-init');
           initSpollerBody(spollersBlock);
           spollersBlock.addEventListener("click", setSpollerAction);
         } else {
           spollersBlock.classList.remove('_spoller-init');
           initSpollerBody(spollersBlock, false);
           spollersBlock.removeEventListener("click", setSpollerAction);
         }
       });
     }
     // Работа с контентом
     function initSpollerBody(spollersBlock, hideSpollerBody = true) {
       let spollerTitles = spollersBlock.querySelectorAll('[data-spoller]');
       if (spollerTitles.length) {
         spollerTitles = Array.from(spollerTitles).filter(item => item.closest('[data-spollers]') === spollersBlock);
         spollerTitles.forEach(spollerTitle => {
           if (hideSpollerBody) {
             spollerTitle.removeAttribute('tabindex');
             if (!spollerTitle.classList.contains('_spoller-active')) {
               spollerTitle.nextElementSibling.hidden = true;
             }
           } else {
             spollerTitle.setAttribute('tabindex', '-1');
             spollerTitle.nextElementSibling.hidden = false;
           }
         });
       }
     }

     function setSpollerAction(e) {
       const el = e.target;
       if (el.closest('[data-spoller]')) {
         const spollerTitle = el.closest('[data-spoller]');
         const spollersBlock = spollerTitle.closest('[data-spollers]');
         const oneSpoller = spollersBlock.hasAttribute('data-one-spoller');
         const spollerSpeed = spollersBlock.dataset.spollersSpeed ? parseInt(spollersBlock.dataset.spollersSpeed) : 500;
         if (!spollersBlock.querySelectorAll('._slide').length) {
           if (oneSpoller && !spollerTitle.classList.contains('_spoller-active')) {
             hideSpollersBody(spollersBlock);
           }
           spollerTitle.classList.toggle('_spoller-active');
           _slideToggle(spollerTitle.nextElementSibling, spollerSpeed);
         }
         e.preventDefault();
       }
     }

     function hideSpollersBody(spollersBlock) {
       const spollerActiveTitle = spollersBlock.querySelector('[data-spoller]._spoller-active');
       const spollerSpeed = spollersBlock.dataset.spollersSpeed ? parseInt(spollersBlock.dataset.spollersSpeed) : 500;
       if (spollerActiveTitle && !spollersBlock.querySelectorAll('._slide').length) {
         spollerActiveTitle.classList.remove('_spoller-active');
         _slideUp(spollerActiveTitle.nextElementSibling, spollerSpeed);
       }
     }
   }
 }

 spollers();

.right-footer__subsublink{
  margin: 0px 0px 20px 0px;
}

.right-footer__subsubtitle{
  color: #000000;
  font-size: 18px;
  background: #e5e5e5;
}

<ul data-spollers class="right-footer__subsublist">
  <li class="right-footer__subsublink">
    <button data-spoller type="button" class="right-footer__subsubtitle">Заголовок</button>
  </li>
  <li class="right-footer__subsublink">
    <button data-spoller type="button" class="right-footer__subsubtitle">Заголовок</button>
    <div class="right-footer__item">
      <ul>
        <li><a href="#">Текст</a></li>
        <li><a href="#">Текст</a></li>
        <li><a href="#">Текст</a></li>
        <li><a href="#">Текст</a></li>
        <li><a href="#">Текст</a></li>
      </ul>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

Некоректная работа спойлера?

Ответы (0 шт):