Expand div in a grid thumbnail with jquery -

how make ul li grid expanded picture below >

i mean, when click each of thumbnail, bigger box expanded below them ( each thumbnail clicked ), if possible toggle or slide / down effect

it's more google image function, need proper way expand box in grid, without plugins

thanks

something this?

$("#items li").click(function(){        $("#items li.big-cloned").remove();    var li=$(this);    var cloned=li.clone().addclass('big-cloned');    li.after(cloned);          });

ul li{      display:inline-block;    width:100px;    height:100px;    border:1px solid;    margin:10px;    text-align:center;  }    li.big-cloned{     display: block;    float: right;    width: 89%;    margin: 0 9%;  }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul id="items">    <li>one</li>    <li>two</li>    <li>three</li>    <li>four</li>    <li>five</li>    <li>six</li>    <li>seven</li>    <li>eight</li>    <li>nine</li>    <li>ten</li>    </ul>