Question

I have a basic bit of jQuery script on my web page that has div hide/show functionality.

It works great, however, I have noticed that my links inside the ‘hidden’ div (.newboxes2) do not work as expected. I expect to click them and get taken to Google.

Can someone explain how I update my code to fix this?

Here is my jsFiddle with hopefully illustrates my point.

jQuery:

$(document).ready(function() {

 $('.showscroll').bind('click', 'h2, h3', function(e) {
   e.preventDefault();

   $(this).toggleClass('active');
   $(".newboxes2").not($(this).find(".newboxes2")).slideUp();
   $(this).find('.newboxes2').slideToggle();

               if($(this).is('.active') ) {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               } else {
                       $(this).find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               }
   if (this.id === 'service29') {
    $('html, body').animate({
      scrollTop: $(this).find('h2').offset().top
    }, 1000);
                }

 });

});

Thank you 🙂

Answer 1

You have e.preventDefault(); in your jquery. this stops the link from going.