So basically, I have a jQuery accordion. I arranged the content so that it appears inside bounding box (header) of the accordion. I have several items that have href's tied to them within the content. Problem is that I can't click through the accordion header because it is also clickable obviously.

It looks like this:

---------------------------
- (top layer)             -
-                         -
-   ------------------    -
-   - (bottom layer) -    -
-   - click me!      -    -
-   ------------------    -
-                         -
---------------------------

So I can just bind a click event to the bottom layer but I'd really love to avoid doing so. What are the options?

• jquery
• css

Taken from http://cmar.me/2011/06/15/links-in-jquery-accordion-headers/

$('content .image a').click(function() {
    window.location = $(this).attr('href');
    return false;
});

Not what was originally requested but simple enough to live with.

You can prevent it by OnClick="preventAction(event)" and in JS

function preventAction(e) {
       e.preventDefault();
}