как сделать аккордеон в jquery

ProgramBox

как сделать аккордеон в jquery

Post author:admin
Запись опубликована:3 декабря, 2022
Post category:Вопросы по программированию

#javascript #php #jquery

Вопрос:

Я пытаюсь создать динамический аккордеон с помощью jquery, который позволяет мне открывать только один элемент за раз, когда открывается другой, предыдущий закрывается, на данный момент мне удалось только открыть его и заставить кнопку исчезнуть при его открытии, но я не могу заставить старый элемент открыться.закрывается при открытии нового. Класс кнопки для открытия — «vermas», и при нажатии на нее он меняется на «vermas active», и отображается содержимое, как я могу закрыть содержимое при открытии нового? Я надеюсь, что вы сможете мне помочь.

 <?php
// Seccion relaciones publicas

$icono__relaciones__publicas  = get_field( 'icono__relaciones__publicas' );
$titulo__relaciones__publicas = get_field( 'titulo__relaciones__publicas' );
$texto__relaciones__publicas  = get_field( 'texto__relaciones__publicas' );

// Seccion proyectos destacados
$imagen__proyecto__destacado    = get_field( 'imagen__proyecto__destacado' );
$titulo__proyecto__destacado    = get_field( 'titulo__proyecto__destacado' );
$subtitulo__proyecto__destacado = get_field( 'subtitulo__proyecto__destacado' );
$texto__proyecto__destacado     = get_field( 'texto__proyecto__destacado' );

// Seccion algunos datos
$titulo__algunos__datos       = get_field( 'titulo__algunos__datos' );

// Seccion elige tu marca
$titulo__marca__noticia       = get_field( 'titulo__marca__noticia' );
$link__boton__marca__noticia  = get_field( 'link__boton__marca__noticia' );

$args = array(
    'post_type' => 'soluciones',
    'order' => 'ASC',
    'posts_per_page' => 15
);
$query = new WP_Query($args);

?>
<?php get_header(); ?>

<?php get_template_part('template_parts/banner-servicios') ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

    <section class="section">
        <div class="container">
            <!-- -->

            <div class="section__body__soluciones">

                <div class="container">
                    <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>  

                    <div class="lista__servicios__reiva">

                        <div class="row">

                            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                                <?php if (get_field('icono')): ?>
                                    <img src="<?php echo get_field('icono') ?>" alt="" class="banner-graphic__ico">
                                <?php endif; ?>
                            </div>
                            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1">
                                <div class="content__servicios">
                                    <h3 class="c-overlay-big__title"><?php the_title(); ?></h3>
                                    <?php the_excerpt(); ?>
                                    <div class="vermas">
                                        Ver más
                                    </div>
                                    <div class="row mt-5" style="display: none;" >
                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                        <div class="lista__relaciones__publicas">
                            <ul>
                                <li>Estrategias de comunicación en medios de comunicación</li>
                                <li>Marketing de influencers</li>
                                <li>Prevención y manejo de crisis</li>
                                <li>Media training</li>
                            </ul>
                        </div>
                        <!-- -->
                    </div>
                    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                        <div class="proyecto__destacado__publico">
                            <img src="<?php echo $imagen__proyecto__destacado; ?>" alt="">
                            <div class="proyecto__destacado">
                                <h3><?php echo $titulo__proyecto__destacado; ?></h3>
                                <h4><?php echo $subtitulo__proyecto__destacado; ?></h4>
                               <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa, llevando de manera virtual, cultura a todos los rincones del país.</p>
                                <a href="#"  class="btn__vermas">Saber más</a>
                            </div>
                            <br><br>
                            <!-- -->

                        </div>

                    </div>

                </div>
                                </div>
                                <!-- -->

                            </div>
                            
                        </div>
                        <!-- -->

                    </div>
                    <!-- -->
                    <?php endwhile; else: ?>
                        <p>Datos vacios.</p>
                    <?php endif;
                    wp_reset_postdata();
                    ?> 
                    </div>
                </div>
                <!-- -->
                
            </div>
            <!-- -->
                
        </div>
        <!-- -->

    </section>

   
    <!-- -->

   <section class="seccion__marca__noticia">
        <div id="encabezado">
            <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4>
            <a href="http://nomadasdigital.com/contacto/" class="btn__vermas">
                Conversemos
            </a>            
        </div>
        <!-- -->
        
    </section>
    <!-- -->

    <div id="scrollUp">
      <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt="">
    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>    
  function main(){
  $(".row mt-5").hide();
  $(".proyecto__destacado__publico").fadeIn(2000);
  $(".row mt-5").hide();
  // button accordion toggle
      $('.row mt-5').not('.vermas   .active').hide();
$(".vermas").click(function(){
    //$(this).next().toggle();
     if($(this).hasClass('.active')){
       $(this).removeClass('.active');
       $(this).next().slideUp();
   }
    else{
     $('.vermas').removeClass('.active');
     $(this).addClass(".active");
     $('.vermas active').slideUp();
     $(this).next().slideDown();
    }
  });
}
$(document).ready(main);

    
</script>



<?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

Ответ №1:

^[1] Если вы придерживаетесь, slideUp/slideDown вы можете использовать slideToggle()

 function main(){
  $(".row mt-5").hide();
  $(".proyecto__destacado__publico").fadeIn(2000);
  $(".row mt-5").hide();
  // button accordion toggle
  $('.row mt-5').not('.vermas   .active').hide();
$(".vermas").click(function(){
    $(".vermas").not($(this)).removeClass('active').next('div').slideUp(); // remove active class from other `vermas` elements but not this one
    $(this).toggleClass('active').next('div').slideToggle();  // toggle the class here
  });
}
$(document).ready(main);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
    <div class="container">
        <!-- -->

        <div class="section__body__soluciones">

            <div class="container">
                <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>  

                <div class="lista__servicios__reiva">

                    <div class="row">

                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                            <?php if (get_field('icono')): ?>
                                <img src="<?php echo get_field('icono') ?>" alt="" class="banner-graphic__ico">
                            <?php endif; ?>
                        </div>
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1">
                            <div class="content__servicios">
                                <h3 class="c-overlay-big__title"><?php the_title(); ?></h3>
                                <?php the_excerpt(); ?>
                                <div class="vermas">
                                    Ver más
                                </div>
                                <div class="row mt-5" style="display:none;">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                    <div class="lista__relaciones__publicas">
                        <ul>
                            <li>Estrategias de comunicación en medios de comunicación</li>
                            <li>Marketing de influencers</li>
                            <li>Prevención y manejo de crisis</li>
                            <li>Media training</li>
                        </ul>
                    </div>
                    <!-- -->
                </div>
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                    <div class="proyecto__destacado__publico">
                        <img src="<?php echo $imagen__proyecto__destacado; ?>" alt="">
                        <div class="proyecto__destacado">
                            <h3><?php echo $titulo__proyecto__destacado; ?></h3>
                            <h4><?php echo $subtitulo__proyecto__destacado; ?></h4>
                           <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa, llevando de manera virtual, cultura a todos los rincones del país.</p>
                            <a href="#"  class="btn__vermas">Saber más</a>
                        </div>
                        <br><br>
                        <!-- -->

                    </div>

                </div>

            </div>
                            </div>
                            <!-- -->

                        </div>

                    </div>
                    <!-- -->

                </div>
                <!-- -->
                <?php endwhile; else: ?>
                    <p>Datos vacios.</p>
                <?php endif;
                wp_reset_postdata();
                ?> 
                </div>
            </div>
            <!-- -->

        </div>
        <!-- -->

    </div>
    <!-- -->

</section>


<!-- -->

<section class="seccion__marca__noticia">
    <div id="encabezado">
        <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4>
        <a href="http://nomadasdigital.com/contacto/" class="btn__vermas">
            Conversemos
        </a>            
    </div>
    <!-- -->

</section>
<!-- -->

<div id="scrollUp">
  <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt="">
</div>

<section class="section">
    <div class="container">
        <!-- -->

        <div class="section__body__soluciones">

            <div class="container">
                <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>  

                <div class="lista__servicios__reiva">

                    <div class="row">

                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                            <?php if (get_field('icono')): ?>
                                <img src="<?php echo get_field('icono') ?>" alt="" class="banner-graphic__ico">
                            <?php endif; ?>
                        </div>
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1">
                            <div class="content__servicios">
                                <h3 class="c-overlay-big__title"><?php the_title(); ?></h3>
                                <?php the_excerpt(); ?>
                                <div class="vermas">
                                    Ver más
                                </div>
                                <div class="row mt-5" style="display:none;">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                    <div class="lista__relaciones__publicas">
                        <ul>
                            <li>Estrategias de comunicación en medios de comunicación</li>
                            <li>Marketing de influencers</li>
                            <li>Prevención y manejo de crisis</li>
                            <li>Media training</li>
                        </ul>
                    </div>
                    <!-- -->
                </div>
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                    <div class="proyecto__destacado__publico">
                        <img src="<?php echo $imagen__proyecto__destacado; ?>" alt="">
                        <div class="proyecto__destacado">
                            <h3><?php echo $titulo__proyecto__destacado; ?></h3>
                            <h4><?php echo $subtitulo__proyecto__destacado; ?></h4>
                           <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa, llevando de manera virtual, cultura a todos los rincones del país.</p>
                            <a href="#"  class="btn__vermas">Saber más</a>
                        </div>
                        <br><br>
                        <!-- -->

                    </div>

                </div>

            </div>
                            </div>
                            <!-- -->

                        </div>

                    </div>
                    <!-- -->

                </div>
                <!-- -->
                <?php endwhile; else: ?>
                    <p>Datos vacios.</p>
                <?php endif;
                wp_reset_postdata();
                ?> 
                </div>
            </div>
            <!-- -->

        </div>
        <!-- -->

    </div>
    <!-- -->

</section>


<!-- -->

<section class="seccion__marca__noticia">
    <div id="encabezado">
        <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4>
        <a href="http://nomadasdigital.com/contacto/" class="btn__vermas">
            Conversemos
        </a>            
    </div>
    <!-- -->

</section>
<!-- -->

<div id="scrollUp">
  <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt="">
</div>

Развернуть фрагмент

^[2] Вы также можете сделать это с помощью простого css element element это означает next в css и использовать javascript для переключения класса

Следующий код, работающий с max-height not display , поэтому не забудьте удалить style="display:none" из следующего div vermas и убедитесь, что в скрытом / отображаемом div нет полей или отступов, потому max-height что он не будет работать должным образом, если у него есть поля / отступы

Показать фрагмент кода

 function main(){
  $(".row mt-5").hide();
  $(".proyecto__destacado__publico").fadeIn(2000);
  $(".row mt-5").hide();
  // button accordion toggle
  $('.row mt-5').not('.vermas   .active').hide();
$(".vermas").click(function(){
    $(".vermas").not($(this)).removeClass('active'); // remove active class from other `vermas` elements but not this one
    $(this).toggleClass('active');  // toggle the class here
  });
}
$(document).ready(main);

 .vermas   div{
  overflow : hidden;
  max-height : 0px;
  transition-duration : 0.5s;
}
.vermas.active   div{
  max-height : 1000px;
  transition-duration : 0.5s;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section">
    <div class="container">
        <!-- -->

        <div class="section__body__soluciones">

            <div class="container">
                <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post();?>  

                <div class="lista__servicios__reiva">

                    <div class="row">

                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-3">
                            <?php if (get_field('icono')): ?>
                                <img src="<?php echo get_field('icono') ?>" alt="" class="banner-graphic__ico">
                            <?php endif; ?>
                        </div>
                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8 order-md-1">
                            <div class="content__servicios">
                                <h3 class="c-overlay-big__title"><?php the_title(); ?></h3>
                                <?php the_excerpt(); ?>
                                <div class="vermas">
                                    Ver más
                                </div>
                                <div class="row mt-5">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                    <div class="lista__relaciones__publicas">
                        <ul>
                            <li>Estrategias de comunicación en medios de comunicación</li>
                            <li>Marketing de influencers</li>
                            <li>Prevención y manejo de crisis</li>
                            <li>Media training</li>
                        </ul>
                    </div>
                    <!-- -->
                </div>
                <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12">
                    <div class="proyecto__destacado__publico">
                        <img src="<?php echo $imagen__proyecto__destacado; ?>" alt="">
                        <div class="proyecto__destacado">
                            <h3><?php echo $titulo__proyecto__destacado; ?></h3>
                            <h4><?php echo $subtitulo__proyecto__destacado; ?></h4>
                           <p class="contenidoslistaservicio">El evento cultural más importante del Perú se reinventa, llevando de manera virtual, cultura a todos los rincones del país.</p>
                            <a href="#"  class="btn__vermas">Saber más</a>
                        </div>
                        <br><br>
                        <!-- -->

                    </div>

                </div>

            </div>
                            </div>
                            <!-- -->

                        </div>

                    </div>
                    <!-- -->

                </div>
                <!-- -->
                <?php endwhile; else: ?>
                    <p>Datos vacios.</p>
                <?php endif;
                wp_reset_postdata();
                ?> 
                </div>
            </div>
            <!-- -->

        </div>
        <!-- -->

    </div>
    <!-- -->

</section>


<!-- -->

<section class="seccion__marca__noticia">
    <div id="encabezado">
        <h4>Hagamos que tu<br>marca sea <span>noticia</span></h4>
        <a href="http://nomadasdigital.com/contacto/" class="btn__vermas">
            Conversemos
        </a>            
    </div>
    <!-- -->

</section>
<!-- -->

<div id="scrollUp">
  <img src="<?php echo get_template_directory_uri(); ?>/assets/img/arrow-scroll.png" alt="">
</div>

Развернуть фрагмент

Метки: как сделать аккордеон в jquery

Вопрос:

Ответ №1:

Вам также может понравиться

Не удается передать данные Ajax в таблицу HTML

Может ли JaCoCo / SonarQube поддерживать другую платформу модульного тестирования?

Как я могу установить внешний ключ из запроса post в Django