Grow your CSS skills. Land your dream job.

toggle problems

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

    # January 5, 2014 at 1:58 pm

    Hi @julie!

    I can only guess at where the content-slider-wrap and product-thumbnails classes are supposed to be, but I put together this demo to maybe help get you on the right track:

    HTML

    <div class="content-slider-wrap">
        <div class="content-slider">
            <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 class="product-thumbnails">
            <div>
                <a href="#"><img src="images/img-product-001.jpg" alt="product image" /></a>
            </div>
        </div>
        <!--/end-product-thumbnails-->
    </div>
    

    Script

    $('.product-thumbnails a').click(function () {
        // find content slider wrap
        var $this = $(this).closest(".product-thumbnails").prev();
        if ($this.is(':hidden')) {
            $this.show();
        } else {
            $this.hide();
        }
    });
    
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".