Expanding/Collapsing Divs on a Webpage

Question

This is my first post so please let me know if I am missing anything to help answer this question.

The goal of my post is to get a better understanding of creating responsive divs and what I will need to make this vision possible:

• I want my webpage to have four divs side by side (roughly 200w x 500h for the example)

• When you click on a div, it expands to a larger width causing the others to move towards the edge of the screen. (so the expanded div does not cover up the others)

• the user can then click the expanded div to collapse it or click one of the other divs to collapse the expanded one and expand the newly clicked div.

Thanks!

Answer 1

With this https://api.jquery.com/toggleClass/ you can add a class o remove it if you attach the selector on click event.

Set the width of the div to 200px and create a new class with width: 500px important! When you click on the div, the event is fired and the new class will change your div width.

Hope I was clear enough.

And welcome!

Answer 2

you can use some js libraries to do that for you. Like this one(jquery dependent): http://gridster.net/ demo of what you want: http://gridster.net/demos/expandable-widgets.html You can change the options to change from hover to click to activate the div expansion.