Как сгенерировать data-target для начальной загрузки с php?

Question

Я пытаюсь сделать каждый пост WordPress для создания аккордеона начальной загрузки в сетке (который я использую классы начальной загрузки). Но у меня возникают проблемы при создании этих случайных атрибутов цели данных для каждого конкретного сообщения.

Это просто статичные части, которые я пробовал перед тем, как импортировать их в WordPress и подключить мой реальный контент к аккордеону.

<?php $uuid = uniqid(); ?>
<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/x.jpg" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $uuid;?>">
</div>

<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/y.jpg" id="toggle-btn"
data-toggle="collapse" data-target="#<?php echo $uuid;?>">
</div>

<div class="col-lg-4 col-xs-12 col-sm-12 col-md-4">
<img src="img/z.jpg" class="img-responsive">
</div>

</div>

<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/x-collapsed.jpg">
</div>
<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/y-collapsed.jpg">
</div>
<div id="<?php echo $uuid;?>" class="collapse">
<img src="img/z-collapsed.jpg">
</div>

Первый работает, как и ожидалось, но даже перед попыткой я могу сказать, второй, а третий и так далее, нет. Помните, что эти запросы должны быть сгенерированы с помощью постов WordPress, и у каждого должна быть своя собственная уникальная цель данных, чтобы при нажатии на нее открывалось окно соответствующей информации. Таким образом, этот фактический код будет внутри foreach, как показано ниже: (хотя мне не нужна помощь с этим)

if ( $the_query->have_posts() ) { 
while ( $the_query->have_posts() ) {
$the_query->the_post();
...

}

Прямо сейчас он дает мне тот же свернутый блок, что и первый, что имеет смысл, поскольку я ничего не сделал с $ uuid, чтобы увеличить его, чтобы он соответствовал его родителю.

Все, что мне нужно, - это только цель данных, как я могу сделать так, чтобы для каждого аккордеона была создана уникальная цель данных, соответствующая ее свернутому блоку. Я предполагаю, что я должен объединить переменную к этому: но я понятия не имею, как.

Любая помощь приветствуется заранее.

Answer 1

Это рабочий пример аккордеона, сделанного из Bootstrap.Идентификаторы генерируются динамически, чтобы избежать конфликта.Пожалуйста, проверьте следующий пример, и вы можете настроить его согласно вашему требованию.Первая карта открыта по умолчанию, а остальные свернуты в начальной.

<?php
$qargs = array(
    'posts_per_page'      => 3,
    'no_found_rows'       => true,
    'ignore_sticky_posts' => true,
);

$the_query = new WP_Query( $qargs );
?>

<?php if ( $the_query->have_posts() ) : ?>
    <div id="accordion">
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            <?php
            $heading_id = 'heading-' . get_the_ID();
            $content_id = 'collapse-' . get_the_ID();
            $is_first = ( 0 === $the_query->current_post ) ? true : false;
            ?>
            <div class="card">
                <div class="card-header" id="<?php echo esc_attr( $heading_id ); ?>">
                    <h5 class="mb-0">
                        <button class="btn btn-link" data-toggle="collapse" data-target="#<?php echo esc_attr( $content_id ); ?>" aria-expanded="true" aria-controls="<?php echo esc_attr( $content_id ); ?>"><?php the_title(); ?></button>
                    </h5>
                </div>
                <div id="<?php echo esc_attr( $content_id ); ?>" class="collapse <?php echo ( $is_first ) ? 'show': ''; ?>" aria-labelledby="<?php echo esc_attr( $heading_id ); ?>" data-parent="#accordion">
                    <div class="card-body">
                        <?php the_excerpt(); ?>
                    </div>
                </div>
            </div><!-- .card -->
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
    </div><!-- #accordion -->
<?php endif; ?>