Decoding this Javascript Function

[zeroblitzt]

Hello friends,

 

 

I do not consider myself a thief. That is why I wouldnt outright steal this code. But I am trying to at least understand it, for you see, I am very, very new to Javascript. I hope that I could then write my own function of a similar nature.

 

Anyway, the code in question:

function toggle_spoiler(obj) {
  while (!/spoiler_(?:open|close)/.test(obj.className))
    obj=obj.parentNode;
  obj.className=obj.className.indexOf('closed') != -1 ? obj.className.replace('closed', 'opened') : obj.className.replace('opened', 'closed');
  return false;
}

 

This is what it does:

 

1. On a page, there would be 4 <span> tags, which call the following CSS classes:

.spoiler_on_close
.spoiler_close
.spoiler_open
.spoiler_on_open

Oddly enough, they all do the same thing: 

display: none;

 

 

2. Inside the spans, there are two hyperlinks that call the "toggle_spoiler" function listed above. Basically, the function hides text, hence the name "spoiler" -- it can be used to hide sensitive parts of movies, video games, etc. that shouldn't be revealed without ruining the whole thing for someone else. To activate this spoiler, a user would type "<spoiler>" and to close it would be "</spoiler>" -- sort of a pseudo HTML tag. this sandwiches any text in between, which becomes hidden.

 

3. So when someone clicks the first hyperlink (accurately marked "spoiler"), it unhides the text on the inside by calling the toggle_spoiler function. Then, a user could click either the original <spoiler> tag, or the </spoiler> tag (which was unhidden with the rest of the text), and that would end up closing/rehiding the text.

 

 

Hope that wasn't too confusing.

 

Anyway, the Javascript aspect of it is the only part I cant figure out, and rightly so,  because its basically the entire operation. If anyone could help me break this down bit by bit I'd greatly appreciate it.