Creazione toggle simile alle cartelle di iOS

[deleted_20210415]

Salve a tutti, innanzitutto mi scuso se scrivo nella sezione sbagliata.
Dovrei realizzare un toggle, che mostri al click un div con larghezza a tutto schermo e altezza definita in PX.

Il codice HTML è:

<div class="ultra-contain">
   <div class="biglietto">
      <img src="http://www.appleface.net/demo/wp-content/uploads/2013/10/Biorisorgive.png" />           <span class="title">
         <htitle>
           <p>Bio Risorgive</p>
         </htitle>
       </span>
    </div>
    <div class="span-container">
        <div class="divinfo">
            <p class="trigger">
              <a href="#">Tutte le info</a>
            </p>
        </div>
    </div>
</div>

Ecco invece il codice CSS relativo agli elementi:

.biglietto {
position: relative;
display: block;
}


htitle {
font-size: 20px;
color: #FFF;
}


htitle p {
text-align: center;
margin-top: 4px;
font-size: 20px;
}


.span-container {
width: 100%;
height: 30px;
background-color: #05B5FA;
margin-left: 0;
}


.divinfo p {
text-align: center;
font-size: 20px;
color: #FFF;
}
.divinfo {
width: 100%;
margin-top: 2px;
}


.toggle-container {
height: 200px;
width: 100%;
left: 0;
bottom: 30px;
background-color: #05B5FA;
position: absolute;
display: block;
float: left;
}


.trigger a:hover {
border-radius: 10px;
}


.trigger a {
color: #FFF;
border-bottom: 2px solid;
}

.title {
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: #05B5FA;
height: 30px;
}

Alla pressione del link contenuto in trigger, si dovrebbe visualizzare un elemento di classe .info-container che, oltre alle caratteristiche sopra elencate, si apra gradualmente e modifichi la dimensione della pagina in modo dinamico.

L'effetto che vorrei ottenere nello specifico è questo:

Senza titolo-1.jpg

Vi ringrazio in anticipo per l'aiuto