Q:

Expand a div in a grid after each row jquery

I have this, actually i want to make something like google images function, i mean if i click the wherever li, the expanded div is always below the row that containing li that i've clicked, anny suggestion ? Thanks
FIDDLE >>
<div class="container">
    <ul>  
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>

     <li class="expanded">
     <div>abc</div>
     </li>

    </ul>
</div>  

JS
$(document).ready(function() {  

    $( ".container ul li" ).click(function() {
        var id = $(this).attr('id');
        var idNum = id.split('-');
        var num = parseInt(idNum[1]);
        var a = Math.ceil(num/4)*4;

        //alert(a);

        $('.container ul li').removeClass('active');
        $(this).addClass('active');
        $('.container ul li li.expanded').slideUp(400,function(){
            $(this).insertAfter($('.container ul li #item-'+a)).slideDown(400);
        })
    }); 
}); 

CSS
body, ul {   
    margin: 0px;
    padding: 0px;  
}
.container {
    width: 90%;
    margin: 0 auto;
}
li {
    width: 23%;
    margin: 10px 1% 0 1%;
    float: left;
    list-style: none outside none;

}
li img {
    width: 100%;
}

.expanded {
    position: relative;   
    display: none;
    background: #ccc;
    z-index: 1;
    width: 100%;
    height: 500px;
}

A:

If I understand your question correctly you want the expanded element to behave as follows:

Show if an li is clicked.
Hide when the same li is clicked.
Hide first then show again if it is visible and a different li is clicked.

There are many ways to achieve this.
One relatively simple approach would be to differentiate your li elements so you can identify which specific li was clicked. This can be a done in a number of ways, but in your case you could simply add a unique id to each li.
I have used numbers here for demonstration purposes - you may want to be a bit more descriptive in your code.
Next you need to modify your javascript to check which li was clicked. You can use your "expanded" variable to keep track of which li last activated the expanded element. (we can regard 0 as its inactive state)
So on each click you check if the clicked li previously toggled the expanded element. If it did, then simply close the element. if it didn't then close the element and re-open it using a callback function. 
I hope this answers your question. 
EDIT: The below snippet has been revised to move the expanded element to its clicked li's row. This will only work if there are 4 images per row.

$(document).ready(function() {
  
    var expanded = 0;

    $( ".container ul li" ).click(function(e) {
      
      e.preventDefault();
         
      var clicked = $(this).attr("id");
                   
      if (clicked == expanded){
        $( ".expanded" ).slideUp("slow", function(){
            $(".expanded").remove();
            expanded = 0;
          });      
      }else if (expanded == 0){
        $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
        $( ".expanded" ).slideDown("slow");
        expanded = clicked;
      }else{
        $( ".expanded" ).slideUp("slow", function(){
          $(".expanded").remove();
          $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
          $( ".expanded" ).slideDown("slow", function(){      
            expanded = clicked;
          });      
        });
      }   
    }); 

    });
body, ul {   
    margin: 0px;
    padding: 0px;  
    height:1000px;
   }
   .container {
    width: 90%;
    margin: 0 auto;
   }
   li {
    width: 23%;
    margin: 10px 1% 0 1%;
    float: left;
    list-style: none outside none;

   }
   li img {
    width: 100%;
   }

   .expanded {
    position: relative;   
    display: none;
    background: #ccc;
    z-index: 1;
    width: 100%;
    height: 500px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <ul>  
      <li id="1">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="2">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="3">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="4">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="5">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="6">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="7">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="8">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
            

     

    </ul>
   </div>

