Краткое описание Woocommerce на странице архива

Question

Я строю магазин на woocommerce и пытаюсь создать спойлер под товар с кратким описанием на странице архива. Но, к сожалению, это работает только с первым продуктом. Я внес изменения в контент-продукт. php

<div class="tog-holder" id="tog">
  <div class="bar horizontal"></div>
  <div class="bar vertical"></div>
</div>
<div id="anim">
  <p><?php echo apply_filters( 'woocommerce_short_description', $product->post->post_excerpt ) ?></p>
</div>

Вот это css:

<style type="text/css">

  /* plus sign */
  #anim{display:none}
  .bar{transition:all .2s ease-in-out}
  #tog.animate .bar{-webkit-transform: rotate(45deg)}
  .tog-holder{position:relative;width:32px;height:32px;padding:15px 0}
  .bar{position:absolute;background-color:#000;}
  .horizontal {width:32px;height:2px;left:0;top:15px;}
  .vertical {width:2px;height:32px;left:15px;top:0}
</style>

И Jquery

<script type="text/javascript">
  jQuery(document).ready(function() {
  jQuery("#tog").click(function() {
    jQuery("#tog").toggleClass("animate");
    jQuery("#anim").slideToggle(800);
  });
});
</script>

I думаю проблема с Jquery. Я не очень хорошо это знаю. Я поместил скрипт и css в заголовок с помощью Плагин вставки верхних и нижних колонтитулов , он работает, как показано ниже на скриншоте. Заранее спасибо!

Answer 1

идентификаторы являются уникальными идентификаторами и должны существовать только один раз на странице.

Ваш jQuery скрипт получает идентификатор "tog" и использует функцию щелчка. Это можно сделать только для первого элемента с этим идентификатором.

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

Другой метод будет заключаться в том, чтобы добавить клик к тегу html

<div onclick="yourFunction()"></div>

и создать функцию, в которой вы ссылаетесь на "this", чтобы всегда использовать ЭТОТ элемент, по которому щелкают.

РЕДАКТИРОВАТЬ: Вот пример кода для вас, чтобы прояснить ситуацию

    <script>
        jQuery(document).ready(function(){
            jQuery(".class_of_your_hidden_description").hide();
            jQuery(".class_of_your_element_to_be_clicked").click(function(){
                jQuery(this).next(".class_of_your_hidden_description").slideToggle();
            });
        });
    </script>