Question

I am having a problem with a link that sits inside of a div on my page. Currently, when the link is clicked, nothing happens. I do not understand why, but I imagine it has to do with the use of hide() and show() on the containing div which I will explain below.

The div is part of a custom “accordion” which uses the following Jquery to open/close the proper div’s when a header is clicked:

   $('.accordion .head').click(function () {
     $('.accordion .head').next().hide();
     $('.accordion .head').removeClass("active");

     $(this).next().show('fast');
     $(this).addClass("active");
     return false;
});

I understand that there are better ways to achieve the “accordion” behavior, but because this is used across our website I do not have the option of updating the accordion to use the actual Jquery accordion() method without making a lot of extra work for myself.

So, given the sample code below can anybody help me understand what the problem is here, or how to overcome it?

<div class="accordion">
  <div class="head active"><a href="#">Heading 1</a></div>
  <div class="accordion-content first">
      <p>
           Some text here
      </p>
      <div class="accordion-logos"> 
      </div>
  </div>            
  <div class="head"><a href="#">Heading 2</a></div>
  <div class="accordion-content">
      <p>
          Some other text here 
      </p>
      <p>
          <a href="http://www.google.com">http://www.google.com</a>                                    
      </p>
  </div>            
</div>

I can’t even get the click to register when I handle it specifically, the alert in the code below never fires when the link is clicked:

  $('.accordion .accordion-content #thelink').click(function () {
    alert();
  });

Thank You,

Rose

Answer 1

Seems I misunderstood you the first time around.

If the google link doesn’t fire then there is either something blocking a links, overwriting the href of the links or maybe even another element is in front of it and you can’t click the link.

If someone wanted to block the link to work they could do something like this:

$('.accordion .accordion-content a').click(function(){
    return false;
});

If you want to check if that is the case you can try unbinding everything and check if you can click the link then:

$('.accordion .accordion-content a').unbind('click');

Also check your html output to see what the href value is set to, maybe someone has overwritten it.

Just go to the rendered page and right-click and select view-source. Search for the google link and check the href value.

​