0

I know this is probably going to be a very simple mistake, but I've spent the last hour on it and I can't for the life of me figure out why it's not working.

What I'm trying to do is build a testimonials section, where a user will:

  • Click a company logo
  • If there is an existing testimonial active, remove it
  • Load the selected testimonial below

What am I doing wrong?

Fiddle: http://jsfiddle.net/rv9HF/

$('.logobuttons a').click(function() {
   var link = $(this).attr('class');

   $('.testimonial-content blockquote').each(function() {
        if ($(this).is(':visible')) {
            $(this).fadeOut(300);
        }
   });

   $('testimonial-content ' + link).fadeIn(300);
});



<section id="testimonials">
   <div class="logobuttons">
       <a class="tc-1" href=""><img src="http://placehold.it/100x100"></a>
       <a class="tc-2" href=""><img src="http://placehold.it/100x100"></a>
       <a class="tc-2" href=""><img src="http://placehold.it/100x100"></a>
       <a class="tc-2" href=""><img src="http://placehold.it/100x100"></a>
   </div>
   <div class="testimonial-content">
       <blockquote class="tc-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </blockquote>
       <blockquote class="tc-2">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </blockquote>
       <blockquote class="tc-3">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </blockquote>
       <blockquote class="tc-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
       </blockquote>
   </div>
</section>
2
  • You have many typos and need to prevent the anchor default behavior on click jsfiddle.net/N2EZh
    – PSL
    Jul 23, 2014 at 0:29
  • Or even simpler, use data attribute to specify the target selector, which is more flexible; jsfiddle.net/VfT6p
    – PSL
    Jul 23, 2014 at 0:35

1 Answer 1

3

You're missing two periods in your Sizzle selector, this should work.

    $('.logobuttons a').click(function(e) {
        var link = $(this).attr('class');

        $('.testimonial-content blockquote').each(function() {
             if ($(this).is(':visible')) {
                 $(this).fadeOut(300);
             }
        });

      $('.testimonial-content .' + link).fadeIn(300);

       e.preventDefault();
   });
1
  • This. I also suggest the href's in each <a> to have a value of #
    – Justin N
    Jul 23, 2014 at 0:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.