Creating a website just a single page website as a landing page. While designing it though I wanted to see if this is something that can be easily achieved doing. There will only be a About and Contact section on the site.

What I am trying to do is achieve this in a one page fully responsive site. Where you go to the site you land on the about page first the page with the Lorem ipsum on it then when the viewer clicks on Contact the cyan area expands like an accordion to show the Contact information as in the second image attached then when you click back to About the cyan closes and the dark blue area expands to show the about information. The magenta area will just stay where it is and wouldnt move would just be static announcement that the full website is coming. If this is possible to do how would I go about it to create this accordion like one page website with the header logo, image and message constantly there as well.