<section class="section">
  <div class="container">
    <div class="activewrappertab">    
      <style>
        .activewrappertab h5{
          color: white;
         }
        .tabs {
          overflow: hidden;
          border-radius: 15px;
         }
        .tabs__head {
          display: flex;
          align-items: flex-end;
          flex-wrap: wrap;
         }
        .tabs__caption {
          text-align: center;
          text-transform: uppercase;
          padding: 8px 30px;
          font-size: 13px;
          cursor: pointer;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          color: var(--color);
          opacity: 0.6;
          background: var(--primary);
          transition: 0.25s;
         }
        .tabs__caption:hover {
          opacity: 0.8;
         }
        .tabs__caption_active {
          opacity: 1;
          background: var(--primary);
         }
        .tabs__body {
          background: var(--primary);
          position: relative;
          top: -2px;
          transition: 0.25s;
         }
        .tabs__content {
          display: none;
          padding: 30px;
          color: var(--color);
          transform: scaleY(0.8);
          opacity: 0;
          transform-origin: center top;
          -webkit-animation: showContent 0.6s forwards;
          animation: showContent 0.6s forwards;
         }
        .tabs__content_active {
          display: block;
         }
        .section {
          --primary: #3fa7d6;
          --color: #fff;
          padding: 15px 0;
         }
        .about {
          padding: 15px 0;
          --primary: #8cff98;
          --color: #121212;
         }
        @-webkit-keyframes showContent {
          0% {
          transform: scaleY(0.8);
          opacity: 0;
           }
          100% {
          transform: scaleY(1);
          opacity: 1;
           }
         }
        @keyframes showContent {
          0% {
          transform: scaleY(0.8);
          opacity: 0;
           }
          100% {
          transform: scaleY(1);
          opacity: 1;
           }
         }
      </style>
      <script>
        document.addEventListener('DOMContentLoaded', () => {  // Структура страницы загружена и готова к взаимодействию
          const tabs = () => {  /* объявляем основную функцию для вкладок, чтобы вся логика была в одном месте */
          const head = document.querySelector('.tabs__head') // ищем элемент с кнопками и записываем в константу
          const body = document.querySelector('.tabs__body') // ищем элемент с контентом и записываем в константу
          const getActiveTabName = () => {  // объявляем функцию для получения названия активной вкладки
          return head.querySelector('.tabs__caption_active').dataset.tab // возвращаем значение data-tab активной кнопки
         }
          const setActiveContent = () => {  // объявляем функцию для установки активного элемента контента
          if (body.querySelector('.tabs__content_active')) {  // если уже есть активный элемент контента
          body.querySelector('.tabs__content_active').classList.remove('tabs__content_active') // то скрываем его
         }
          body.querySelector(`[data-tab=${ getActiveTabName() }]`).classList.add('tabs__content_active') // затем ищем элемент контента, у которого значение data-tab совпадает со значением data-tab активной кнопки и отображаем его
         }
          // проверяем при загрузке страницы, есть ли активная вкладка
          if (!head.querySelector('.tabs__caption_active')) {   // если активной вкладки нет
          head.querySelector('.tabs__caption').classList.add('tabs__caption_active') // то делаем активной по-умолчанию первую вкладку
         }
          setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой при загрузке страницы
          head.addEventListener('click', e => {  // при клике на .tabs__head
          const caption = e.target.closest('.tabs__caption') // узнаем, был ли клик на кнопке
          if (!caption) return // если клик был не на кнопке, то прерываем выполнение функции
          if (caption.classList.contains('tabs__caption_active')) return // если клик был на активной кнопке, то тоже прерываем выполнение функции и ничего не делаем
          if (head.querySelector('.tabs__caption_active')) {  // если уже есть активная кнопка
          head.querySelector('.tabs__caption_active').classList.remove('tabs__caption_active') // то удаляем ей активный класс
         }
          caption.classList.add('tabs__caption_active') // затем добавляем активный класс кнопке, на которой был клик
          setActiveContent(getActiveTabName()) // устанавливаем активный элемент контента в соответствии с активной кнопкой
         })
         }
          tabs() // вызываем основную функцию
         })
      </script>
            <div class="section__tabs tabs">
              <div class="tabs__head">
                  <?php
                    $parent_id = 0;
                    $sub_cats = get_categories( array(
                      'child_of' => $parent_id, # or 'child_of'
                      'hide_empty' => 0,
                      'meta_key'       => 'num4',
                      'orderby'        => 'meta_value_num',
                      'order'          => 'ASC',
                      'number'     => '0',
                    ) ); ?>
                    <?php $counterr=1 ?>
                    <?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
                    <?php
                      $nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
                      $numberCat = get_term_meta($cat->cat_ID, 'num4', true);
                    ?>
                <?php if (!empty($numberCat)) {  ?>
                        <div class="tabs__caption" data-tab="tabs<?php echo $counterr ?>"><?php echo $cat->name;?></div>
                <?php  } ?>
                    <?php $counterr++ ?>   
                    <?php
                     }
                      wp_reset_postdata(); // сбрасываем глобальную переменную пост
                     }
                    ?>
              </div>
              <div class="tabs__body">
                <?php
                $parent_id = 0;
                $sub_cats = get_categories( array(
                  'child_of' => $parent_id, # or 'child_of'
                  'hide_empty' => 0,
                  'meta_key'       => 'num4',
                  'orderby'        => 'meta_value_num',
                  'order'          => 'ASC',
                  'number'     => '0',
                ) ); ?>
                <?php $counterrr=1 ?>
                
                <?php if( $sub_cats ){ foreach( $sub_cats as $cat ){ ?>
                  <?php
                    # получаем записи из рубрики
                    $myposts = get_posts( array(
                      'numberposts' => 10,
                      'category'    => $cat->cat_ID,
                      'orderby'     => 'post_date',
                      'order'       => 'DESC',
                    ) );
                  ?>
                  <?php
                    $nameCat = get_term_meta($cat->cat_ID, 'short', true); #вывод поля - echo $nameCat;
                    $numberCat = get_term_meta($cat->cat_ID, 'num4', true);
                  ?>
                    <div class="tabs__content" data-tab="tabs<?php echo $counterrr ?>">
                    <?php if (!empty($numberCat)) {  ?>
                    <?php
                      # выводим записи
                      global $post;
                      foreach($myposts as $post){
                    setup_postdata($post); ?>
                      <h5 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                    <?php
                     }
                    ?>  
                    </div>
                  <?php  } ?>
                    <?php $counterrr++ ?>   
                <?php
                   }
                    wp_reset_postdata(); // сбрасываем глобальную переменную пост
                   }
                ?>
        </div>
      </div>
    </div>
  </div>
</section>