Forums

  • # December 31, 2013 at 2:07 pm

    Hello Guys, i badly need your help since i’m new to jquery/javascript. this is what i want to achieve: if the user will click the link inside the “content-slider-wrap”, it will toggle the “product-thumbnails” div

    But the code i made will take effect in all the divs even if i only click the link inside the first div.

    i want the toggle will take effect only on certain divs where i click it

    please help me to do it

    HTML:

    <div>
      <div>
        <p>
          <span>Eco:</span> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        </p>
    
        <a href="#"><img src="images/img-slider.png" alt="image" /></a>
      </div>
    
      <!--/end-content-slider-wrap-->
    
      <div>
        <div>
          <a href="#"><img src="images/img-product-001.jpg" alt="product image" /></a>
        </div>
      </div>
    
      <!--/end-product-thumbnails-->
    </div>
    
    <div>
      <div>
        <p>
          <span>Eco:</span> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        </p>
    
        <a href="#"><img src="images/img-slider.png" alt="image" /></a>
      </div>
    
      <!--/end-content-slider-wrap-->
    
      <div>
        <div>
          <a href="#"><img src="images/img-product-001.jpg" alt="product image" /></a>
        </div>
      </div>
    
      <!--/end-product-thumbnails-->
    </div>
    

    the script i made:

    $('.content-slider-wrap a').click(function(){
      var $this= $(".product-thumbnails");
      if($this.is(':hidden')) {
        $this.show();
      }else{
        $this.hide();
      }
    });
    

    thanks, Julie

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag