-1

I'm struggling with removing 'active' class from a link that is already selected.

Looking at the line 20 in JavaScript. Shouldn't classLink.toggle add / remove "active" on clickedElement? I even tried few approaches like

 if (clickedElement.classList.contains('active')) {
  clickedElement.classList.remove('active');
} else {
  clickedElement.classList.add('active');
}

but none seem to work on this particular class (works fine on any other class i add). What am i missing?

https://jsfiddle.net/Evenclan/09sn2kd3/15/

Evenclan
  • 11
  • 4
  • It's not clear what you're asking. Are you expecting your JS Fiddle title links to be red until another link is selected? – mwilson Feb 14 '20 at 22:26
  • So you want the text `Article 2` to be bold when clicked and to un-blod when clicking on something else – mwilson Feb 14 '20 at 22:29
  • Sorry about that! Right know, "active" class bolds an article (left column). What i want to do is that the class disappears and that the "article" is no longer bolded. When clicked: `` When clicked again on the same link: `` – Evenclan Feb 14 '20 at 22:32
  • 1
    You should narrow your code down to a minimal reproducible state so it's clear what you want. Looking through your JS Fiddle, your code works and applies the class just fine. – mwilson Feb 14 '20 at 22:33
  • 1
    `toggle` does not "seem" to remove the class (=boldness) on an already bold element (if you reclick the same one) because you `remove` all in a `for loop` just the lines above. So you remove it and then reapply it.. working here as it should. The way your code works, you can not "inactivate" all articles anymore once one is activated. – Lain Feb 14 '20 at 22:35
  • in your jsfiddle the elements "li> a" determine the content of the second column, so this means that there can only be one element from this list which can be "active"? – Mister Jojo Feb 14 '20 at 22:40
  • @Evenclan: Like Lain wrote: toggle works fine here. The issue is that you remove all `active` before toggling which makes it adding the class instead of removing it. – JavaScript Feb 14 '20 at 22:45
  • What i want to achieve is this: https://imgur.com/a/RxJlp4K (and that it hides an article that is shown in the middle column at the same time) But thank you for all the anwsers, I will try to figure out how to change my code to fit what i want to do. – Evenclan Feb 14 '20 at 22:53
  • 1
    @Evenclan: I told you above why it does not work like that. Just read my comment. Change `activeLink.classList.remove('active')` to `if(clickedElement !==activeLink) activeLink.classList.remove('active')` and you are good to go. https://jsfiddle.net/8jrwn3sx/ – Lain Feb 14 '20 at 22:54

2 Answers2

0

Just to answer the actual question, why toggle does not untoggle .active in your fiddle. https://jsfiddle.net/Evenclan/09sn2kd3/15/

What you are doing first, before toggling is:

for (let activeLink of activeLinks) {
  activeLink.classList.remove('active');
}

This removes .active from all link elements. Which means that all those have no class anymore or atleast no class .active.

In the next line you toggle the class .active which was just removed:

clickedElement.classList.toggle('active');

Thus the class gets added back (what is not there gets added, what is there gets removed).

toggle actually works fine, just your logic does not. To get the desired result you have to exclude the current clicked element from the removing of class.

for (let activeLink of activeLinks) {
  if(clickedElement !== activeLink) activeLink.classList.remove('active');
}

clickedElement.classList.toggle('active');

https://jsfiddle.net/8jrwn3sx/

Lain
  • 3,657
  • 1
  • 20
  • 27
  • Thank you for all your help and sorry i wasn't clear enough. I couldn't understand what was happening, but i start to understand what is going on thanks to your input. – Evenclan Feb 15 '20 at 08:21
-3

classList includes a toggle method.

this.classList.toggle('active');

How to toggle class using pure javascript in html

EDIT: The JsFiddle you included is working. I opened the console and clicked the different links and they were toggling active properly.

nicoavn
  • 73
  • 6
  • I did. My suggestion was not related to the use or not of this, but the fact that the list already includes a toggle method. – nicoavn Feb 14 '20 at 22:27
  • Did you even open the JsFiddle? It's working there. – nicoavn Feb 14 '20 at 22:29
  • His question literally says "Line 20 in the jsfiddle" You will see that this line of code has `Element.classList.toggle`. Your answer provides no value. – mwilson Feb 14 '20 at 22:30
  • Just understand that it's working on Jsfiddle. There's no problem with the code. It might be the browser. Where's the value of your comments? – nicoavn Feb 14 '20 at 22:37
  • Well, the actual issue is up to interpretation since not declared clearly.. The linked fiddle does not work properly in two cases: 1. When you open it both article 1 and article 2 are active. 2. When you click on the active article 1 it does not deactivate. – Lain Feb 14 '20 at 22:44
  • 2
    I agree, this answer has no value. – JavaScript Feb 14 '20 at 22:47
  • I did not understand the question at first. My bad. First day here. – nicoavn Feb 15 '20 at 00:58