Loop through the contents of a child page, displaying it as a modal with foundation

WP_child-page-loop.php

if ( ! function_exists ( 'xad_product_childpage ' )) :
  function xad_product_childpage($pageId) {

  $childArgs = array(
    'sort_order' => 'ASC',
    'sort_column' => 'menu_order',
    'child_of' => $pageId
  );
  $childList = get_pages($childArgs);

  foreach ($childList as $child) {
    ?><div class="columns small-12 medium-4">
      <h5 class="child-title"><a data-open="product-modal-<?php echo $child->ID; ?>"><?php echo $child->post_title; ?></a></h5>
      <?php the_field('short_description', $child); ?>
      <div class="reveal large" id="product-modal-<?php echo $child->ID; ?>" data-reveal>
        <h3><?php the_field('detail_title', $child); ?></h3>
        <?php the_field('detail_content', $child) ?>
        <button class="close-button" data-close aria-label="Close modal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    </div>
  
  <?php }

  }
  endif;
        
  /* On the template call, xad_product_childpage(123) with 123 being the page ID to loop through */