How to expand a div that upon expanding has four divs inside?

Question

There's an animation I'm trying to create, I don't know what this animation is called so I'm not sure how to ask or search for what I want to do. I apologize if this has been asked here before.

Basically I want a div (square) to expand into a bigger div (square) which itself is contains 4 smaller divs (squares) when hovering, and when mouseleave it returns to the original div.

I'm not sure if this is clear.

I've tried hide(), addClass(), removeClass(), so many of them. addClass only helps me expand the div into a bigger div but I can't figure out how to include 4 smaller divs inside this expanded div.

Here's what I have so far:

JSFiddle

This is the part of the code where I try to include the four divs within expanded div:

<div class = 'expand'>
        <div id = 'a'></div>
        <div id = 'b'></div>
        <div id = 'c'></div>
        <div id = 'd'></div>
</div>

please create a http://jsfiddle.net/. nothing makes it clear than an example — Hank Lapidez, Jul 14 '14 at 06:01
try .append() to add the divs at mouseon. .remove() to remove them on mouseout. — Anurag, Jul 14 '14 at 06:01
It's too broad until you show us your effort what you've tried. Post your code in the question. — Bhojendra Rauniyar, Jul 14 '14 at 06:02
Maybe this thread can help you http://stackoverflow.com/questions/15435827/expand-div-over-others-on-mouse-over-jquery Please search a bit more. — dster77, Jul 14 '14 at 06:07
does your inner `div`s have any specific layout/arrangement? like are they just stacked on top of each other or do they for 2 rows and 2 columns? please specify. — Arnelle Balane, Jul 14 '14 at 07:48
@ArnelleBalane I'm trying to place my inner divs with ID a,b,c,d inside of the expanded div when the mouse hovers, thus dividing the expanded div into four sections. — jason adams, Jul 16 '14 at 07:17

How to expand a div that upon expanding has four divs inside?

0 Answers0