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.

Someone asked for something similar in a thread a while ago but only using css3. [This was the solution that I came up with but is a bit different to what you want and works on hover. It can be turned into [URL="http://www.pmob.co.uk/temp/transition-2boxes-stretch6.htm"]a sort of accordion](www.pmob.co.uk/temp/transition-2boxes-stretch4.htm).

However I think you will need some js to do this for your example where you want it activated onclick and also supporting older browsers.

This is very very close to what I would be looking for except the text line length is thin then expanded when expanded the div. Is it possible to always keep it expanded and just slide and revealing the text. The only other thing would be is it possible to have the blues and magenta go right down to the bottom, I'm not sure if possible to fake that or to actually have them go down to the browser window when the content is shorter.This is a superb job, most horizontal scripts are just for galleries I checked around quite a bit and tried a few but couldnt really mimic what I needed to accomplish but believe the example you did here is the closes thing to what I need so far.

Thanks, this is working great so far. Just couple questions, how can I get some text onto the 300px magenta border like in the desig as well just need to figure out how to make stuff go to the bottom of the browser the colours that slides.

The element I gave you is pretty self contained so you could just add anther wrapper and float another element next to it. I only added the coloured borders to show what it would look like if something was next to it.

I got everything how it should be looking now the only issue now say on larger screen like after the three colours I'd like them to continue right to the bottom. So if you click on contact and it slide out and the dark blue slides in the cyan will slide out all way to the bottom. Currently it doesnt do that, everything else is perfect except for that. Only hing I could even think of is giving the height in percentage like the header image a percentage height of 40% and the coloured part a min-height of 60% so then the sliding will continue all way to the bottom right now it just stops after the padding-bottom of 150px that I have. Do you know what I mean? Thats only thing I need to fix otherwise I have everything line up like I want etc.

Assuming the top part is a fixed height you could absolutely position a wrapper at top:460px and bottom:0 and then set the inner table to height:100%. That should allow the table colours to reach the bottom and indeed expand if they need to. Its a bit of a hack because basically the inner falls out of the parent if over 100% but as you don't have anything underneath it should work.