Changing hamburger icon to a X icon

Question

I have used jQuery to change hamburger icon to X icon when clicking on the hamburger icon to view navbar.
For some reason it is not working.
https://code.sololearn.com/WrC8m0Sp15ug/?ref=app

Answer 1

This is what you did wrong:
Your condition (simplified) is:
if(icon == " ||| "){
icon = " X "
}
if(icon == " X "){
icon = " |||"
}
Now let's say icon is |||.
Then the first if statement changes our icon to X.
After that THE CODE IN THE SECOND IF IS EVALUATED BECAUSE THE CONDITION IS TRUE and now we have ||| again.
Just use else instead of if.

Answer 2

Thanks Kevin Star. Silly mistake.
I have corrected the code. Is this the right way for changing the hamburger icon. Does professional websites also uses something like this ?