<section class="" style="">
  <div class="container">
    <div class="tabwrapper">      
      <style>
        /* Style the tab */
        .tab {
          overflow: hidden;
          border: 1px solid #ccc;
          background-color: #f1f1f1;
         }
        /* Style the buttons that are used to open the tab content */
        .tab button {
          background-color: inherit;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 14px 16px;
          transition: 0.3s;
         }
        /* Change background color of buttons on hover */
        .tab button:hover {
          background-color: #ddd;
         }
        /* Create an active/current tablink class */
        .tab button.active {
          background-color: #ccc;
         }
        /* Style the tab content */
        .tabcontent {
          display: none;
          padding: 6px 12px;
          border: 1px solid #ccc;
          border-top: none;
         }
      </style>
      <script>
        function openTab(evt, tabName) {
          // Declare all variables
          var i, tabcontent, tablinks;
          // Get all elements with class="tabcontent" and hide them
          tabcontent = document.getElementsByClassName("tabcontent");
          for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
           }
          // Get all elements with class="tablinks" and remove the class "active"
          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
           }
          // Show the current tab, and add an "active" class to the button that opened the tab
          document.getElementById(tabName).style.display = "block";
          evt.currentTarget.className += " active";
         }
      </script>
      <div class="tab">
      <?php
        $parent_id = 0;
        $sub_cats = get_categories( array(
      'child_of' => $parent_id, # or 'child_of'
      'hide_empty'  => 0,
      'number'    => 0,
      'meta_key'    => 'num4',
      'orderby'   => 'meta_value_num',
      'order'     => 'ASC',
        ) ); ?>
        <?php $counter=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)) {  ?>
              <button class="tablinks" onclick="openTab(event, 'tab<?php echo $counter ?>')"><?php echo $cat->name ?></button>
          <?php  } ?>
        <?php $counter++ ?>   
        <?php
         }
          wp_reset_postdata(); // сбрасываем глобальную переменную пост
         }
      ?>
      </div>
        <?php
          $parent_id = 0;
          # получаем дочерние рубрики
          $sub_cats = get_categories( array(
            'child_of' => $parent_id, # or 'child_of'
            'hide_empty' => 0,
            'number'    => 0,
            'meta_key'       => 'num4',
            'orderby'        => 'meta_value_num',
            'order'          => 'ASC',
            ) );
          ?>
        <?php $count=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);
        ?>
    <?php if (!empty($numberCat)) {  ?>
      <div id="tab<?php echo $count ?>" class="tabcontent">
      <?php
        # выводим записи
        global $post;
        foreach($myposts as $post){
        setup_postdata($post);
      ?>
        <h3 style="margin-bottom: 36px;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
      <?php
       }
      ?>  
      </div>
    <?php  } ?>
    <?php $count++ ?>
        <?php
         }
          wp_reset_postdata(); // сбрасываем глобальную переменную пост
         }
        ?>
    </div>
  </div>
</section>

Как сделать чтобы ваш проект оказался в нашем портфолио?

Оформите заказ

На создание сайта и продвижение

Нужен продающий сайт под ключ?

Сайты с трафиком и заявками в наши дни - это редкость, но наша студия по созданию сайтов Seosite справится с этой задачей. Создать конверсионный сайт под ключ легко, с помощью наших инструкций это стало возможным. Ваш созданный сео сайт, словно правильно подобранный ключ от замка, откроет вам двери в заветный ТОП поисковой выдачи Яндекс и Google. Ищите надежную студию, кто занимается созданием сайтов под ключ, что работают и приносят заявки - тогда вы зашли по адресу. Обращайтесь к siteseo.site

Портфолио работ по созданию сайтов, SEO продвижению, рекламе

В интернет-магазинах важно определить структуру товаров. При создании товарного каталога важно учитывать факторы ранжирования. Наши разработчики имеют большой опыт разработки, вся система создания проектов строго структурирована и проходит по разработанным нами инструкциям. Поверьте нашему опыту, лучше не жалеть бюджет для создания качественной структуры сеосайта. Бюджет пойдёт на продвижение блога, главной страницы, услуг. Преимущество сеосайта заключается в удобном функционале и возможности учета продаж.

Табы со скроллом

Статичные табы

Копирайтинг: что это — 7 советов для начинающих копирайтеров

Копирайтинг — это написание эффективных продающих и информационных текстов для веб-сайтов и печатных изданий. Целью копирайтерских текстов является привлечь внимание читателей и побудить их к целевым действиям: заказать товар или услугу, подписаться на рассылку сайта.

Выбор админки

Табы без скролла