Кнопка «Просмотреть все» показывает скрытые элементы div, а затем изменяется на «меньше просмотра» - как получить «view less» для повторного скрытия ранее скрытых элементов div

Question

Я разрабатываю функцию «Просмотреть все» / «Просмотреть меньше», чтобы скрыть и показать элементы.

Используя Jquery, мне удалось создать функцию showAllFunction, которая отображает скрытые элементы div, когда вы нажимаете кнопка. Затем текст кнопки изменится с «просмотреть все» на «просмотреть меньше», и ему будет присвоено новое имя класса.

  $(document).ready(function(){
  $(".btn1").attr("onclick","showAllFunction()");
});


//show all function
function showAllFunction(){
  $("#blocks-item:nth-of-type(1n+3)").css("display","flex");
    $(".knowledge-base").css("min-height", "fit-content");
    $(".btn1").html("View Less");
}
 //hide all function
 function hideAllFunction (){
  alert('Robbie = awesome')
  $("#blocks-item:nth-of-type(1n+3)").css("display","none");
  $(".btn1").html("View All");
  $(this).removeClass('btn1pressed').addClass('btn1')
}; 

изображение показывает отображение элементов div - некоторые элементы div скрыты

Изображение показывает отображение div - все div показаны

К сожалению, я не очень опытен и не понимаю, как заставить его изменить функциональность так что, когда я нажимаю кнопку «Просмотреть меньше», он будет скрывать ранее скрытые элементы.

Наценка: .hbs:

 <section class="section knowledge-base">
    <h2 class="categories-heading">{{ t 'categories' }}/Projects</h2>
    <section id="categories-blocks">
      <ul id="blocks-list">
        {{#each categories}}
        {{#if ../has_multiple_categories}}
        <li id="blocks-item">
          <a href='{{url}}' id="blocks-item-link">
            <span id="blocks-item-title">{{name}}</span>
            <span id="blocks-item-description">{{excerpt description}}</span>
          </a>
        </li>
        {{else}}
        {{#each sections}}
        <li id="blocks-item">
          <a href='{{url}}' id="blocks-item-link">
            <span id="blocks-item-title">
              {{name}}
            </span>
            <span id="blocks-item-description">{{excerpt description}}</span>
          </a>
        </li>
        {{/each}}
        {{/if}}
        {{/each}}
      </ul>
      <div class="categories-blocks-view-all">
        **<button class='btn1' role="button">View All</button>**
      </div>

      {{pagination}}
    </section>