Link inside jQuery UI Accordion

Question

Using jQuery UI Accordion to create dropdowns for a filter list.

http://89.151.89.43/uk/trade-essentials-column-radiators-1.html#usestorage

Inside the Header there is also a clear button (You need to select an option for it to appear) The CMS is generating this automatically, unfortunately it doesn't function because it's inside the H4 tag surrounding it.

You will see an onclick function on the clear-button, I would like to keep the button where it is but just allow it to function.

To recreate:

1. Go to the above link
2. Select an option on the left
3. Clear button should appear
4. Try click the 'Clear' button
5. The accordion should then close

What I want: The function contained in the 'onclick' to clear all checkboxes that are under that header

Answer 1

Without seeing the source code, I can't give you an exact answer, but in general you want to do something like this:

$("#clear-button").click(function(event){
    event.stopPropagation();
    event.preventDefault();
    log("clicked!");
});

Answer 2

Looking at your example page, there seems to be a lot code missing.

I would suggest something like:

$(".clear-button").on("click", function(event) {
  event.preventDefault();
  $(this).parent().parent().find(":checked").prop("checked", false);
});

When the button is clicked, after being generated dynamically, you will want to find the input elements that are within the parent div element. Since the button is within the h4 , you have to find that parent div .

An example, not working, since I cannot find the OnFilter() function code. You could assign the click callback when the button is added instead of using the .on() .

https://jsfiddle.net/Twisty/o4L504ya/