SlidingPanel Animation

I would like to display a sliding panel in my project, from a bottom fixed div (so sliding in the top direction).

This sliding panel will be used to extend a view of an existing element.

I have some problems to make it works great (where to start sliding, respect the padding of his parents, etc, etc)

I made a Plunker of a sample project representing my problem :

In this Plunker i would like to :

1. open my sliding panel from the top of my div (in red). As you will notice, when you click on the button to open it, the sliding panel start his animation from the bottom of the page and go over my div (in red).
2. align my sliding panel with my div (in red).

So here are my questions:

1. How can i start my sliding animation from the top of my div (in red).

I already tried that :

.sliding-panel-wrapper {
    /* Other Css property */
    margin-bottom: /*Height of the red div*/;
    bottom: 0;
}

$("#mybtn").click(function() {
    // Increase height instead of moving it from outside of the page to inside
    $("#slidingPanel")[0].style.height= '500px'
});

This solution works for the starting position of my panel, but i don't want the sliding panel to increase his size, but to slide .

2. How can i give him the exact same size / padding / margin etc etc than the div in red ( because recursively looking for padding and margin of his parent seems not to be the best solution).

Edit : I'm looking for a "generic" solution if possible, i would like to be able that my sliding panel adapt itself to the constraint that i defined above if they change (so i would like to avoid giving hard coded value in my css).

Edit 2: Summarizing my question is : How can i make a panel slide NOT from the bottom of the page, but from the Top of another div (Please see my plunker)

If i'm understanding your question, you would like a sliding panel which is off page and then when a button is clicked it slides on page.

If this is the case then this will answer your question.

This is the html code which sets a div id as slide. The button has an onclick function called Slide().

<div id="slide"></div>
<button onclick="Slide()">Slide</button>

Make sure the div has a position of fixed and then set the bottom attribute to whatever you require.

#slide{
position:fixed;
bottom:-52%;
background-color:red;
width:100px;
height:500px;
right:0;
transition:1s;
}

This javascript is called when you click the Slide button. If the div is off screen then it will "slide" onto screen and if the div is on screen then it will "slide" slide off screen. But make sure you set your values to suit your needs because these values may not work for your solution.

var a = false;
    function Slide() {
        if (a) {
            $('#slide').css('bottom', '-52%');
            a = false;
        }
        else {
            $('#slide').css('bottom', '0%');
            a = true;
        }



    }

Any questions, just ask.