Resize when clicking on toggle

Question

Does anyone know how I can resize div parent by clicking on a toggle, which in this case opens a div eldest daughter?

Within the div #g-intro I have a class that opens the content and exceeds the screen size. I use this function so that the div occupy the entire screen, but don’t keep increasing or decreasing on the mobile device because of the Chrome bar.

Code:

       (function($) {
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if(isMobile && window.matchMedia("(orientation: portrait)").matches){
    function AllHeight( elem ) {

    var altura  = $( window ).height() + "px";
    var altura2 = $("#g-valores).height();
    $( elem ).css({
        height: altura
    });}
$( window ).on( "load size", function() {
    AllHeight( "#uppercg, #upper,#g-intro" );
});}

Answer 1

<section id="g-intro" class="metade size-flex">
                <div class="g-container">                        
    <div class="g-block hidden-desktop g-block-flex size-100">
   <div class="g-content g-particle">
<div class="sample-content">
        <div class="g-grid">
            <div class="g-block">
                <div class="g-content">
<div class="sample-description"></div>
</div>
</div>
<div class="g-grid">
</div>
</div>       
</div>                  
</div>        
</div>
<div class="g-grid">
<div class="g-block g-block-flex center size-100">
<div class="g-content g-particle">
<button type="button" id="b-valores" class="button-valores" data-element="#g-valores">NOSSOS VALORES</button>
<div class="content-servico">
<div id="g-valores">
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="g-content-valores">
<div class="g-grid">
<div class="g-block">
<div class="g-content">
</div>
</div>
</div>
</div>
</div>
<div class="mask">
</div>
</div>
</div>          
</div>                    
</div>
</div>
</div>
</section>

CSS

#g-valores{margin-left:0;float:left; position:relative; display: none;}

JS

    (function($) {
    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if(isMobile && window.matchMedia("(orientation: portrait)").matches){
        function AllHeight( elem ) {

        var altura  = $( window ).height() + "px";

        $( elem ).css({
            height: altura
        });}


    $( window ).on( "load size", function() {
        AllHeight( "#uppercg, #upper,#g-intro" );
    });
    } else if(isMobile && window.matchMedia("(orientation: landscape)").matches){
        function AllHeightLand( elem ) {
        var altura  = $( window ).height() + "px";

        $( elem ).css({
            height: altura
        });
            }
    $( window ).on( "load size", function() {
        AllHeightLand( "#uppercg, #upper,#g-intro" );
    });
    }

    window.addEventListener("orientationchange", function() {                   
        if (window.matchMedia("(orientation: portrait)").matches) {
            window.addEventListener("resize", function () { 
            location.reload();
        }, false);
         }
        if (window.matchMedia("(orientation: landscape)").matches) {
            window.addEventListener("resize", function () { 
            location.reload();
        }, false);
         }
    }, false);})(jQuery);

(function($) {
$(function(){
    $(".button-valores").click(function(e){
        e.preventDefault();
        el = $(this).data('element');
        $(el).slideToggle('slow');
});
});})(jQuery);

Answer 2

I understand you want to leave the #g-intro always with the height of the screen.

In that case, to open a div larger inside, this should adjust to the size of #g-introand have in the css the attribute overflow-y: auto

I adapted to try to exemplify here.

 var limite = $('#g-intro');

limite.height(200);//simula o que a função AllHeight faz

$(".button-valores").click(function (e) {

     el = $(this).data('element');
    
//ajusta a div filha à altura limite
     $(el).css({'height': ( limite.height() - $(this).outerHeight() )+ 'px', 'width': limite.width() + 'px'}).slideToggle('slow');
        });

#g-intro {background-color:#ffff00; border: 1px solid #ff0000}  

#g-valores{margin-left:0;float:left; position:relative; display: none; color: #fff; background-color:#000;  overflow-y: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id="g-intro" class="metade size-flex">
    <div class="g-container">
        <div class="g-block hidden-desktop g-block-flex size-100">
            <div class="g-content g-particle">
                <div class="sample-content">
                    <div class="g-grid">
                        <div class="g-block">
                            <div class="g-content">
                                <div class="sample-description"></div>
                            </div>
                        </div>
                        <div class="g-grid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="g-grid">
            <div class="g-block g-block-flex center size-100">
                <div class="g-content g-particle">
                    <button type="button" id="b-valores" class="button-valores" data-element="#g-valores">NOSSOS VALORES</button>
                    <div class="content-servico">
                        <div id="g-valores">
                            <div class="g-content-valores">
                                <div class="g-grid">
                                    <div class="g-block">
                                        <div class="g-content">
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                            conteudo<br /><br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
               
                    </div>
       
                </div>
    
            </div>
   
        </div>

    </div>
    <div class="mask">
    </div>
    
</section>