<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>

             <!-- Tab links -->
<div class="tab">
     
    <button class="tablinks active" onclick="openTab(event, 'zavisimosti')">Зависимости</button>
    <button class="tablinks" onclick="openTab(event, 'kollectiv')">Коллектив</button>    
  <button class="tablinks" onclick="openTab(event, 'lichnost')">Личность</button>
    <button class="tablinks" onclick="openTab(event, 'obschie')">Общие вопросы</button>
    <button class="tablinks" onclick="openTab(event, 'otnosheniya')">Отношения</button>
    <button class="tablinks" onclick="openTab(event, 'reabilitacia')">Реабилитация</button>
    <button class="tablinks" onclick="openTab(event, 'eda')">Пищевые нарушения</button>
    <button class="tablinks" onclick="openTab(event, 'roditeli')">Родители и дети</button>
    <button class="tablinks" onclick="openTab(event, 'sexologi')">Сексология</button>
    <button class="tablinks" onclick="openTab(event, 'dream')">Сны</button>
    <button class="tablinks" onclick="openTab(event, 'test')">Тесты</button>
    
</div>

<!-- Tab content -->
<div id="zavisimosti" class="tabcontent" style="display: block;">
  <h3>Зависимости</h3>
  <?php
   
    if ( have_posts() ) :

      if ( is_home() && ! is_front_page() ) :
        ?>
        <div>
          <h2 class="page-title screen-reader-text"><?php single_post_title(); ?></h2>
        </div>
        <?php
      endif;

              
              
      query_posts($query_string.'&cat=8');     
      /* Start the Loop */
      global $wp_query;
 $args = array_merge( $wp_query->query_vars, ['posts_per_page' => 10 ] );
 query_posts( $args );
      while  ( have_posts() ) :
          
      the_post();

        /*
         * Include the Post-Type-specific template for the content.
         * If you want to override this in a child theme, then include a file
         * called content-___.php (where ___ is the Post Type name) and that will be used instead.
         */
        get_template_part( 'template-parts/content-ask', get_post_type() );

      endwhile;

      

    else :

      get_template_part( 'template-parts/content', 'none' );

    endif;
    ?>
</div>

<div id="kollectiv" class="tabcontent">
  <h3>Коллектив</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="lichnost" class="tabcontent">
  <h3>Личность</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="obschie" class="tabcontent">
  <h3>Общие</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="otnosheniya" class="tabcontent">
  <h3>Отношения</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="reabilitacia" class="tabcontent">
  <h3>Реабилитация</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="eda" class="tabcontent">
  <h3>Пища</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="roditeli" class="tabcontent">
  <h3>Родители</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="sexologi" class="tabcontent">
  <h3>Сексология</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="dream" class="tabcontent">
  <h3>Сны</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
            
<div id="test" class="tabcontent">
  <h3>Тесты</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>