Running jQuery functions one by one to execute CSS transitions

Here is my fiddle. I would like to achieve 'one page full screen' type of webpage. I have two sections; display one at a time by display:block/none;each section contains content; .content1, .content2 respectively; content div works as a button to fire another section. You can also see a fixed header.

Section .intro contains .content1, section .archive contains .content2.

Now, I would like to build following chain of events on click: (i) .content1 fades out, (ii) .intro gets display:none, .archive gains display:block, (iii) .content2fades in.

The other way around, respectively, on click on .content2: (i) .content2 fades out, (ii) .archive gets display:none, .intro gains display:block, (iii) .content1fades in.

I have some experience with CSS, so I made and checked css transitions for fade in, fade out effects. Up to this point, everything is clear for me.

My problem is, however, I do not know how to build the chains of events. I have googled a lot of similar questions and tried some solutions, but had no luck. I have very little experience with JavaScript, so there might be some obvious mistakes in how I tried to implement the solutions.

I do not attach script in my fiddle; I would like to ask if you could point me in the right direction rather than fix my code, because, you see, I am not sure which solution I should show--so far they all look equally hopeless for me.

Should I go with JavaScript? JQuery? Pure CSS? Could you sketch / write some code how you would handle the problem?

Could you review the idea of displayed/hidden sections for the effect I am trying to achieve?