Блог

У меня есть div в стиле аккордеона с 3 коробками. При нажатии на него открывается и закрывается содержимое в поле зрения. У меня есть абсолютно позиционированный div с фоновым изображением, которое мне нужно менять при каждом щелчке. Когда я впервые загружаю страницу, я могу заставить ее работать, когда вы нажимаете на каждый элемент. Однако, как только вы снова нажмете на любое из этих полей div, оно прилипнет к одному и тому же фоновому изображению и не будет повторяться. Я пробовал использовать .next(), .closest (), но это не работает.

 <?php 

$args = array(
  'post_type' => 'services',
  's' => '-demand' // will exclude all post with the title name "Demand" present
);
 $services = new WP_Query($args);

 ;?>
 <?php if($services->have_posts()) : ?>
<section class="section__wrapper" id="services__set">
 <div class="services__accordion" id="class-accordions">
    <div class="services__container">
        <?php $i = 1; 
        while($services->have_posts()): $services->the_post();
        global $post;
        $post_slug = $post->post_name; ?>

            <div class="services__col" id="<?php echo $post_slug;?>">
                <span class="h2 services__title"><?php the_title();?></span>
                <div class="services__content">
                    <?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
                    <div class="services__btn">
                        <a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
                    </div>
                </div>
            </div>
            <div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
        <?php $i  ; endwhile;wp_reset_postdata();?>
    </div>
</div>
</section>
<script>
jQuery(document).ready(function($) {
$('.services__content').css('height', '0');
$('.services__col').first().addClass("active-reveal");
$('.services_bg').first().addClass("active");
$('.services__col').click(
    function() { //When you click on a button...
        var isActive = $(this).hasClass('active-reveal'); 
        if( isActive ){  //If it already has an active class...
            $(this).removeClass('active-reveal'); //...it loses the active class....
        }
        else{ //If it does NOT already have an active class...
            $('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
            $(this).addClass('active-reveal'); //...except this one.
        }
        if ($('.services__col').attr("class") == "active-reveal") {
          $(this).next('.services_bg').removeClass('active');
        } else {
          $(this).next('.services_bg').addClass('active');
        }
    });
 });

</script>
<?php endif;?>
 

Обновленный код с ответом

 <?php 

$args = array(
      'post_type' => 'services',
      's' => '-demand' // will exclude all post with the title name "Demand" present
   );
   $services = new WP_Query($args);

;?>
<?php if($services->have_posts()) : ?>
<section id="services__set">
    <div class="services__accordion" id="class-accordions">
        <div class="services__container">
            <?php $i = 1; 
            while($services->have_posts()): $services->the_post();
            global $post;
            $post_slug = $post->post_name; ?>

                <div class="services__col" id="<?php echo $post_slug;?>">
                    <span class="h2 services__title"><?php the_title();?></span>
                    <div class="services__content">
                        <?php $barreDesc = get_field('class_description'); if($barreDesc): ?><p><?php echo $barreDesc; ?></p><?php endif; ?>
                        <div class="services__btn">
                            <a class="btn white-btn" href="<?php echo site_url(); ?>/locations/">Find A Studio</a>
                        </div>
                    </div>
                </div>
                <div class="services_bg" style="background-image:url(<?php the_field('service_feature_image');?>);"></div>
            <?php $i  ; endwhile;wp_reset_postdata();?>
        </div>
    </div>
</section>
<script>
jQuery(document).ready(function($) {
    $('.services__content').css('height', '0');
    $('.services__col').first().addClass("active-reveal");
    $('.services_bg').first().addClass("active");
    $('.services__col').click(
        function() { //When you click on a button...
            var isActive = $(this).hasClass('active-reveal'); 
            if( isActive ){  //If it already has an active class...
                $(this).removeClass('active-reveal'); //...it loses the active class....
            }
            else{ //If it does NOT already have an active class...
                $('.services__col').removeClass('active-reveal'); //all buttons lose the active class...
                $(this).addClass('active-reveal'); //...except this one.
            }
            if ($('.services__col').attr("class") == "active-reveal") {
              $(this).next('.services_bg').removeClass('active');
            } else {
                $('.services_bg').removeClass('active');
              $(this).next('.services_bg').addClass('active');
            }
        });
});

</script>
<?php endif;?>