Make the item fit for the whole parent

Question

I create an extended admin panel and I play the role of editing elements, I like it when I click to edit an element that it would fill with all the space of its parent, however I do not know how to make the element return to its original position with animation, any idea , how to do it? I have tried this so far:

Here is the pen: http://codepen.io/anon/pen/WvGONp

HTML

<div id="container"> <div class="single-item"> <div class="title">home</div> <a class="edit" href="#"></a> </div> <div class="single-item"> <div class="title">Gallery</div> <a class="edit" href="#"></a> </div> <div class="single-item"> <div class="title">Contact</div> <a class="edit" href="#"></a> </div> </div> 

SCSS

 * { margin: 0; padding: 0; border: 0; box-sizing: border-box; } html, body, #container { height: 100%; min-height: 100%; } #container{ & > .single-item{ position: relative; background-color: #d9d9d9; border-radius: 2px; margin-bottom: 15px; padding: 15px; z-index: 1; & > .edit{ display: block; position: absolute; background-color: #000; top: 15px; right: 15px; width: 20px; height: 20px; } &.active{ z-index: 2; } } } 

Javascript

 $("#container").on("click", ".edit", function(e){ e.preventDefault(); var el = $(this); var elParent = el.closest(".single-item"); var curElTop = elParent.position().top; var curElLeft = elParent.position().left; elParent.toggleClass("active", function(){ elParent.css({ position: "absolute", top: curElTop, left: curElLeft }).animate({ top: 0, right: 0, bottom: 0, left: 0 }); }); }); 

Answer 1

CSS3 Transition helps you create smooth animations for the full width and height of the screen.

But if for some reason you want to do this in jQuery, here is the solution:

The second time you click the edit button, you just have to say:

 $("<element_reference>").removeAttr("style"); 

It will remove the styles that were applied earlier, return the element to its normal form.

Or you can also change the position from “absolute” to “static”, both will give you the same result. Submit this question to animate your position using jQuery.

Hope this helps.

Answer 2

I found that the easiest way to do things like this:

• Put CSS transition properties in the element.
• Create a new class that you add to the element when you click it to make it fullscreen. Remove the class when the item is closed.

CSS transitions tend to be faster and smoother.