Defillement d'une partie 'une page web

bonjour,
je suis entrain de faire une application web pour publier des offres d'emplois et jaimerais que le bloc contenant les offres d'emploi contiennent un certain nombre d'emploi et au cas ous on voudrais voir plus d'offre il ya un un bouton que l'on clique dessus et qui affiche plus d'offres dans le bloc
donc en fait je veux que le bouton cache juste la page les offre d'emplois et que lorsque l'on clique dessus l'on puisse voir
voici mon code

      <div class="row row-50"  >
      <?php
                        // include("/page de connexion/connexion.php");

                        error_reporting(E_ALL);
                        ini_set('display_errors', TRUE);
                        ini_set('display_startup_errors', TRUE);

                        $bdd = new PDO ("mysql:host=localhost;dbname=afrijob","root","");
                        $sql="SELECT id_emploie , nom_entr, poste, ville,
                        type_contrat, nbre,img_emploi FROM emploie ORDER BY id_emploie DESC";
                        $request=$bdd->query($sql);
                        while($row=$request->fetch())
                    {  
                  ?>
        <div class="col-md-6 col-xl-4" >
          <!-- <div style="  background: rgb(7, 196, 48);margin: auto;" class="row align-items-start">  -->
              <article class="event-default-wrap"  style="background:white;border-radius: 15px; border:blue;">
                        <div class="event-default"style="height: 250px; width: 450px;" >
                          <figure class="event-default-image">
                            <img src="uploads/<?php echo stripslashes($row["img_emploi"]) ;?>" style="height: 250px; width: 450px;"/>
                          </figure>
                          <!-- <img src="images/logo.PNG" alt="" width="570" height="370"/> -->  
                          <div class="event-default-caption">
                            <a class="button button-xs button-secondary button-nina"  href="afficher_offre.php?id_emploie=<?= stripslashes($row["id_emploie"]) ?>">voir plus</a> 
                          </div>                    
                        </div>
                        <div class="event-default-inner">
                            <h5><a class="event-default-title" href="#">
                            <?php  echo stripslashes($row["nom_entr"])?> ,  
                            <?php  echo stripslashes($row["poste"]) ?> ,
                            <?php  echo stripslashes($row["ville"]) ?> ,
                            <?php  echo stripslashes($row["type_contrat"]) ?> ,
                            <p style="color: red;">publie le<?php $date = date("d-m-Y H:i");Print(" $date"); ?></p>
                           </a></h5>
                           <span class="heading-5"><?php  echo stripslashes($row["nbre"]) ?>places</span>
                        </div>
              </article>
          <!-- </div> -->
          </div>
          <?php
                    } 
                  ?>
                  <div class="col-12 container row row justify-content-xl-end row-20 text-center text-xl-left">
                  <a class="button button-secondary button-nina" href="#">voir plus d'offre</a></div>
        </div>