Woocommerce short description toggle on archive page

Im building shop on woocommerce and im trying to make spoiler under product with short description on archive page. But unfortunetely it works only with first product. I made changes inside content-product.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>

Here is a 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>

And Jquery

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

I think problem is with Jquery. I dont know it very well. I put script and css to to header with Insert Headers and Footers plugin it works like below on the screenshot. Thanks in advance!

Answer

IDs are unique identifiers and should only be existing once on a page.

Your jQuery script is getting the id “tog” and uses the click function. You are only do this for the first element with this id.

You should use a class instead and could use a for each to add this click function to all elements with this class.

Another method would be to add the on click to the html tag

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

and create a function where you are referencing to “this” to always use THIS element which is clicked.

EDIT: Here is an example code for you, to make things clearer

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

Advertisement

Answer