Question

I’m trying to create multiple sections and show or hide them on click. So I have three id‘s: section2, section2hidden, and section2visible.

Please take a look at the non-working code at this website. Click on the language arts link under 6th grade and then hit the back button in the top left corner (not on your browser!). You will see that it brings the element back, but it is still opacity:0 or something.

Answer 1

First of all, when you develop javascript code, you need to have a method to debug. If you are using Firefox, there’s an addon called Firebug. If you are using Chrome, it’s already integrated. Using that, you would see your “back” function fails to execute completely, because there is no element with “6-2” id, and you are trying to access properties of a null object.
That answers “why it’s failing” question. I’d recommend though to look up on these things:

• Basic function concepts. You can have one function with parameters,
  instead of building “one(), two(), three()” etc functions.
• Basic loop programming. You are using code like

  
  .getElementById('6-1')...
  .getElementById('6-2')...
  

  Use loops to let the machine work for you, don’t just copy/paste blindly.

• CSS classes. Instead of changing the id of the element, just add a class
  to it, eg “hidden”. Then add a rule like

  .hidden{display:none;}

  When you take away the class, the element will reappear because the rule will no longer apply.