Div Expandsion on Click

Question

I was wondering if anyone can give me some insight on javascript/jquery for div expansion. In the JSFiddle you will find:

• Four black divs:

  .first_box {
  width: 142px;
  height: 142px;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  display: table;
  background-color: black;
  }
  

• A unique hover color for each div:

  .first_box:hover {
  width: 142px;
  height: 142px;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  display: table;
  background-color: green;
  }
  

So my question is:

What can I use so that when a div is clicked, it expands to the size of the four divs (289 X 289)?

The expanded div will then be filled with unique content.

Thank you!

JSFiddle: http://jsfiddle.net/SXfeG/1/

Answer 1

If you use absolute positionning, you can add some CSS like that :

.div-clicked {
    width: 289px !important ;
    height: 289px !important ;
    margin-top: 0 !important ;
    margin-left: 0 !important ;
    z-index: 400 ;
}

div {
    transition: all 1s ; // To add transition effect
}

And then, with jQuery, you can toggle 'clicked' class simply by using :

$('div').on('click', function (e) { $(this).toggleClass('clicked') ; })

JSFiddle : http://jsfiddle.net/85QFN/