How to target a class for an a tag inside a heading?

what I have so far

this part returns the heading: nextSibling.previousElementSibling
and the *** is the missing part, which has basically this structure: a heading with two a tags, in the first one it should check for the class collapsed

Did you try querySelector("a")? I can’t try it currently, but it should only select the first a element in your heading

1 Like

Thanks, that I’m afraid would target all the a tags (from all the headings) and then select the first from them, instead of only the a tag for an specific heading.

I meant not document.query…, just inserted for the ****

Oh I see thanks! I’m getting this from the console
for nextSibling.previousElementSibling.querySelector("a"))
wait : I’m trying some stuff based on this idea

@tzerio Thank you I didn’t’ know you could do that, your code was fine, it was a problem on my side… thanks again :slight_smile:

Well I ended up with this resulting code:

const margenCollapseHeadings = (event) => {"margen-collapse-heading");'okey', 'roger');

var items2 = document.getElementsByClassName('anchor-link-collapse');
for (var i2 = 0; i2 < items2.length; i2++) {
  items2[i2].addEventListener('click', margenCollapseHeadings);

is there a better way to debug than:'okey', 'roger');
there must be or hope so…

Do you mean to check whether the class got successfully added?
In your first post you had classList.contains(), wouldn’t this one help you?
Otherwise, could you elaborate what exactly you want it to do :slightly_smiling_face:

P.S. there is also classList.toggle, if you want the same function to add and remove the class

1 Like

I mean to check where the class is being added…
and what can be done width [object HTMLHeadingElement] output on the console.log to get more info about the elements instead of only that message?

Nicee! was using this… thank you!!! :slight_smile:

const margenCollapseHeadings = (event) => {

  if ("margen-collapse-heading")) {"margen-collapse-heading");
  else {"margen-collapse-heading");
    //'okey', 'roger');

The easiest solution is probably having the devtools open and watching for the blinking spot when clicking on the link :sweat_smile:
Or giving the class a side effect like changing the background color…

Maybe you used document.write() to get [object HTMLHeadingElement] ? It looks like javascript tried to convert that h* to a string :thinking:

I did a console.log(; , it prints that whole element including the children in collapsed menus to the console

1 Like

You can also break on attribute modifications.

In the inspector right-click the DOM node that is getting the class added and select “Break on” > “attribute modifications”. If the class is added it will stop the code and put you into the debugger inside the code that did the attribute modification (adding a class is one such action).


Thanks to both!!

Very good stuff!!

Would have to recheck the code to find the examples, let me see if I find them to resolve the mystery… I can tell I didn’t use document.write() at least

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.