Multiple divs – Horizontal slide out content

[ambiguousfrog]

I’ve been staring at my monitor all day perhaps too long where I’m making the problem too complicated when it’s quite simple. Hoping somewhere here can slap me digitally and point me in the right direction.

Three elements floated left and positioned absolute within a container. On toggle of each element opens up to reveal sliderContent which is hidden by default. Once clicked the surrounded elements are pushed aside not overlapped.

Fiddle thus far: http://jsfiddle.net/ywL5n4w9/2/

To help explain I’ve made a superb image.

Image: http://i.imgur.com/0BzPhLI.jpg

Hopefully that makes sense, It may be gobbledegook and for that I blame 11 + cups of coffee.

Thanks,
D

[Paulie_D]

If the content divs are positoned absolutely, their width will not be taken into account by the parent.

Also, in your fiddle they aren’t floated…which kinda makes sense since floating and position:absolute really doesn’t make sense.

You can probably do this without positioning by transitioning the width of the content divs from 0 to a fixed value.

You can’t transition/animate to auto with CSS or even Jquery (natively) although there are plugins that will do this for you.

[mhodges44]

Description was pretty vague, but I have created a fiddle that I think is what you are looking for. You’ll obviously have to tweak it to suit your needs, but I think the basic functionality is there for you.

http://jsfiddle.net/mhodges44/ywL5n4w9/8/

[Author]

Posts