group of links

how to identify all have been clicked?

[Bundy2]

Hi,
I'm making a page which provides links to images illustrating a story, which the viewer will have already read. Problem is this:
a first group of links has class"A"; these can be clicked in any order: however, I would like all of class "A" to have been clicked before the viewer gets to see the next group of links.

A possible way using jQuery might be to add a class "B"to a link when it's clicked; and then do
if all class"A" has Class"B", show the next group of links.
But I can't recall how to say "all of Class "A". Brain gone to mud.

And maybe there's a simpler way?

[lucy24]

Do the links take the user to a new page, so you can't do anything with a global array variable where everything has to acquire a non-zero value before you're allowed to continue? Or are the images done in a canvas within the same page?

[NickMNS]

Assuming you want all "A" links to be clicked before any "B" links are displayed.

You need to add an event listener for clicks to each link, and then on click add a value to an array, eg: for "A" link 1, you could add a value "A1" to the array, then "A2" etc. This can be done by setting the <a> tag's id, or by using "data-" attribute. Once all the links have been clicked, you unhide all class "B" links.

Actually no!

A better solution is to do opposite. Set an array with the value of each link's id eg: ["a1", "a2", "a3"] then when a link is clicked remove the value from the array. When the length of the array === 0 then unhide the b-links. If I am not mistake there is "hide" method in jQuery.

Note, I don't work with jQuery so I prefer not to post any code. But to show what I mean here is a demo plain javascript (ES6).
[jsfiddle.net...]

[Bundy2]

@ Lucy: images and links all on the same page...
@ Nick: many thanks, can work with that...