Uncaught DOMException: Ошибка: hidden 'не является допустимым селектором

Question

Я пытаюсь загрузить больше элементов, когда нажимаю на кнопку загрузить больше. Код возвращает ошибку: Uncaught DOMException: не удалось выполнить 'querySelectorAll' для 'Document': '.moreArticle: hidden' не является допустимым селектором.

        <div class="articles col-lg-10 offset-lg-2">

            <div class="article moreArticle col-lg-5">
                <h3>Workshop k tématu  spolufinancovaných projektů z ESI fondů</h3> 
                <p>28/12/2018</p>
            </div>
            <div class="article moreArticle col-lg-5" style="display: none;">
                <h3>Workshop k tématu  spolufinancovaných projektů z ESI fondů</h3> 
                <p>28/12/2018</p>
            </div>
            <div class="article moreArticle col-lg-5" style="display: none;">
                <h3>Workshop k tématu  spolufinancovaných projektů z ESI fondů</h3> 
                <p>28/12/2018</p>
            </div>

             <div id="loadMore" style="">
                <a href="#">Načíst další články</a>
             </div>

        </div>

И мой JavaScript:

  $('#loadMore').on('click', (e) => {
    e.preventDefault();
    $('.moreArticle:hidden').slice(0, 6).slideDown();
    if ($('.moreArticle:hidden').length === 0) {
      $('#loadMore').fadeOut('slow');
    }
  });

Я использую Cash-Dom в веб-пакете. Есть идеи, что не так с кодом?