Pointer events of jquery ui accordion

Question

I am trying to make my Jquery Ui accordion work in a way that initially you can only open the first tab of the accordion. On click of the first accordion tab, the second one becomes openable (clickable), etc. all the way up to 7.

I have set the pointer events of accordion tabs 2-7 as none. I then try to use the following code:

$(".ui-accordion-header:nth-of-type(1)").onclick = function() {
    $(".ui-accordion-header:nth-of-type(2)").style.pointerEvents = "auto";
};

It is unfortunately not working, and I am not sure what the issue is. A link to the webpage I am working on can be found here

Thank you in advance for all of the help :)

Answer 1

If you are using jQuery stick to it completely

$(".ui-accordion-header").click(function() {
  var nextId = $(this).attr("id").split('-').pop();
  $("#ui-id-" + nextId).css("pointer-events","auto");
};