Answer the question
In order to leave comments, you need to log in
How to show the body of an accordion on click, and close the other at the same time?
In general, I have a col-lg-6 block and an accordion goes in each, they are output by a php cycle (this is part of the code in wordpress), I could not think of anything better than doing 2 cycles in different blocks. The first accordion works as it should, when clicked, one element opens and the opened one closes. I suspect the problem is in 2 cycles, but I can’t understand what exactly the cant is, below I apply the code of the second accordion, which opens all the elements and does not close any of them until you click on it again.
<div class="col-lg-6">
<div id="accordion" role="tablist">
<?php if( have_rows('slovar_r') ): ?>
<?php while( have_rows('slovar_r') ): the_row();
// vars
$title_slovar_r = get_sub_field('title_slovar_r');
$text_slovar_r = get_sub_field('text_slovar_r');
$t_title_r = translit($title_slovar_r);
?>
<div class="card">
<?php if( $title_slovar_r ): ?>
<div class="card-header" role="tab" id="#<?php echo $t_title_r ?>">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#<?php echo $t_title_r.'1'?>" aria-expanded="true" aria-controls="<?php echo $t_title_r.'1'?>"><?php echo $title_slovar_r; ?>
</a>
</h5>
</div>
<?php endif; ?>
<?php if( $text_slovar_r ): ?>
<div id="<?php echo $t_title_r.'1'?>" class="collapse" role="tabpanel" aria-labelledby="<?php echo $t_title_r ?>" data-parent="#accordion">
<div class="card-body">
<?php echo $text_slovar_r; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
<!--end accordion-->
<?php endif; ?>
</div>
<!--end col-6-->
<div class="col-lg-6">
<div id="accordion" role="tablist">
<?php if( have_rows('slovar') ): ?>
<?php while( have_rows('slovar') ): the_row();
// vars
$title_slovar = get_sub_field('title_slovar');
$text_slovar = get_sub_field('text_slovar');
$t_title = translit($title_slovar);
?>
<div class="card">
<?php if( $title_slovar ): ?>
<div class="card-header" role="tab" id="#<?php echo $t_title ?>">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#<?php echo $t_title.'1'?>" aria-expanded="true" aria-controls="<?php echo $t_title.'1'?>"><?php echo $title_slovar; ?>
</a>
</h5>
</div>
<?php endif; ?>
<?php if( $text_slovar ): ?>
<div id="<?php echo $t_title.'1'?>" class="collapse" role="tabpanel" aria-labelledby="<?php echo $t_title ?>" data-parent="#accordion">
<div class="card-body">
<?php echo $text_slovar; ?>
</div>
</div>
<?php endif; ?>
</div>
<?php endwhile; ?>
</div>
<!--end accordion-->
<?php endif; ?>
</div>
<!--end col-6-->
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question