La animación de jQuery SlideToggle cambia agregando una altura (%)

El siguiente código ejecuta un menú jQuery SlideToggle . Una vez que haga clic en el se desplazará el . Todo esto funciona bien hasta el momento.

Sin embargo, ahora quiero asignar una height: 25%; relativa height: 25%; al

dentro del .
(ver comentarios en mi CSS a continuación)
Una vez que hago esto, la animación de SlideToggle cambia y se desplaza en el diferente.

¿Cómo puedo agregar una height: 25%; relativa height: 25%; entonces la animación sigue siendo la misma que sin la altura relativa?

También puedes encontrar mi código aquí

 $(document).ready(function () { $(".container").on('click', function () { $(this).next('.panel').slideToggle(500); }); }); 
 html { height: 100%; } body { height: 100%; } .container { height: 30%; width: 30%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: orange; } .panel { height: 30%; width: 70%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: blue; } .panel div { height: 25%; /* Why does the animation change by adding this height? */ box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } 
  
Menu
1.0 Menu
2.0 Menu
3.0 Menu
4.0 Menu

Sugiero no usar un valor%, el problema es que mientras el panel se encoge, la altura aún toma el 25%, es por eso que se ve ese efecto, si se pone una altura estática funciona correctamente …

 $(document).ready(function () { $(".container").on('click', function () { $(this).next('.panel').slideToggle(500); }); }); 
 html { height: 100%; } body { height: 100%; } .container { height: 115px; width: 30%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: orange; } .panel { height: 115px; width: 70%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: blue; } .panel div {/* Why does the animation change by adding this height? */ /*height:25%;*/ height: 28.4px; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } 
  
Menu
1.0 Menu
2.0 Menu
3.0 Menu
4.0 Menu

Aquí tienes una solución https://jsfiddle.net/p6dqLLj6/68/

 $(document).ready(function () { $(".container").on('click', function () { $(this).next('.panel').slideToggle(500); }).css({ height: $('.panel').height() }); $(window).resize( function(){ $(".container").css({ height: $('.panel').height() }); }); }); 
 html { height: 100%; } body { height: 100%; } .container { width: 30%; float: left; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: orange; } .panel { width: 70%; float: left; box-sizing: border-box; border-style: solid; border-width: 0px; background-color: blue; } .panel div { padding: 5px; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } 
  
Menu
1.0 Menu
2.0 Menu
3.0 Menu
4.0 Menu

Sugiero usar display flex, podemos agregar varias columnas y obtienes la misma altura para cada columna

 $(document).ready(function () { $(".container").on('click', function () { console.log(this); $( "div" ).find('.panel').slideToggle(500); }); }); 
 html { height: 100%; } body { height: 100%; } .main{display:flex;width:100%} .container { flex:1; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: orange; } .flex-4 { flex:4; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: blue; } .panel{ display:flex; width:100%; flex-direction: column; } .panel div { flex:1; box-sizing: border-box; border-style: solid; border-width: 1px; background-color: green; } 
  
Menu
1.0 Menu
2.0 Menu
3.0 Menu
4.0 Menu