V
V
vikholodov2017-10-10 03:23:37
JavaScript
vikholodov, 2017-10-10 03:23:37

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

And this is the first working accordion
<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 question

Ask a Question

731 491 924 answers to any question