Change the whole page content?

1

So I have been working on the personal portfolio website challenge and I ran into an obstacle,

firstly, here is the code http://codepen.io/shaffie/pen/NpNjwd

What I am trying to do is to fade in the portfolio section when clicking the button (I have already figured that part out), what I haven’t figured out yet is how to replace the html\css content when clicking the experience button. I tried the replace() function but then if I decide to go back to the portfolio section it doesn’t change anything although I added an If condition for that.

Any suggestions?

Thanks in advance

2

You can replace the html content of a given element with the jQuery method $.html(): http://api.jquery.com/html/ . A couple of thoughts:

  1. When it comes to completely changing everything on the screen, this seems like a roundabout way to do it. What if the user wants to go “back” to what they just saw? There’s no browser history, or even built-in navigation functions. You might consider doing a “single-page” scrolling model, where each page is just “down” the screen from the next–or, if you want it to be completely offscreen, model the site as a “carousel,” in which you click through from one page to the next like a slideshow.
  2. The $.html() method can replace the html; you don’t even have to bother replacing CSS, just write enough different rules and classes to cover all the sections and then call them as needed.