CSS Gurus in here

[PaulStat]

I've been playing with Bootstrap/CSS/JQuery to create a layout similar to the Java Swing BorderLayout. What I also wanted was for the north, south, east, west sections to be collapsible.

I think I'm almost there. Here's the fiddle https://jsfiddle.net/vgsausm7/21/ you'll need to pull the central divide to the left to expand the preview area so that it doesn't stack

Issues I have

1. The North/South transitions aren't nice and smooth like the West transition. What am I doing wrong here?

2. What's up with the East button, I can't click it but I can't spot any difference between this and the other buttons which are clickable

 

[DodgeeRascal]

Disclaimer: Not a CSS Guru but maybe I can help with No.2

The North button is basically on-top of the East button

.top {

1. top: 0px;
2. right: 0px;
3. /* bottom: 0px; */
4. left: 50%;
5. position: absolute;

}

removing the bottom: 0px; fixes it for me in Chrome .

 

[Dup]

1) You cannot animate display:none with CSS alone, hence why it closes instantly. Check out the answers here:

http://stackoverflow.com/questions/13037637/css3-animation-and-display-none

2) As above

 

[gord]

You can also add overflow: hidden; to your html, body, .sidebar, #content selector to stop the scrollbars popping up briefly.

 

[PaulStat]

Thanks guys got it working in the end