Как развалилась только первая панель начальной загрузки? - PullRequest
Новая
       14

Как развалилась только первая панель начальной загрузки?

0 голосов
/ 18 февраля 2019

Я хочу активировать только первую панель начальной загрузки, но когда она загружена, сверните / активируйте всю панель.Вот мой код: 

<?php                                                            
     $the_query = new WP_Query( array(
     'posts_per_page'=>-1,
     'post_type' => 'news-and-events',
     'order'   => 'ASC',
     'category_name'     => 'news-events',
     'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
?>  

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php 
     $i = 1;
     while ($the_query -> have_posts()) : $the_query -> the_post(); 
 ?>

<div class="panel panel-default">
  <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
        <?php the_title(); ?>
      </a>
    </h4>
  </div>
<div id="collapse-<?php echo $i;?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body nws-body">
    <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
    <div class="nws-body-img">
      <?php the_post_thumbnail();?>
    </div>
    <?php the_field('news_description'); ?>
</div>
</div>
    </div>
  <?php
         $i++;
         endwhile;
  ?>

Здесь класс panel-collapse collapse in in свернут. Когда я загрузил страницу в активную всю панель.Я хочу, чтобы рухнула только первая панель.Другие будут неактивны.

1 Ответ

0 голосов
/ 18 февраля 2019

Краткое описание:

Когда вы печатаете класс, вам нужно добавить условие, если значение $ i равно 1, тогда выведите in class.в противном случае все div без класса. 

<?php get_header(); ?>

<?php                                                            
     $the_query = new WP_Query( array(
     'posts_per_page'=>-1,
     'post_type' => 'news-and-events',
     'order'   => 'ASC',
     'category_name'     => 'news-events',
     'paged' => get_query_var('paged') ? get_query_var('paged') : 1) ); 
?> 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<?php 
     $i = 1;
     while ($the_query -> have_posts()) : $the_query -> the_post(); 
 ?>

<div class="panel panel-default">
  <div class="panel-heading silva-news-panel" role="tab" id="headingOne">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php echo $i;?>" aria-expanded="true" aria-controls="collapseOne">
        <?php the_title(); ?>
      </a>
    </h4>
  </div>
<div id="collapse-<?php echo $i;?>" class="panel-collapse collapse <?php if($i == 1) echo "in"; ?>" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body nws-body">
    <h3><i class="fa fa-newspaper-o" aria-hidden="true"></i> <?php echo get_the_date(); ?></h3>
    <div class="nws-body-img">
      <?php the_post_thumbnail();?>
    </div>
    <?php the_field('news_description'); ?>
</div>
</div>
    </div>
  <?php
         $i++;
         endwhile;
  ?>
...