ACF重复字段循环：前4项展示，剩余项嵌套至hidden DIV

Got it, here's a clean implementation that matches your layout requirements using Advanced Custom Fields (ACF) in WordPress. We'll handle both your technical_details_left and technical_details_right repeater fields, split the items into the first 4 visible ones and the rest hidden, and stick exactly to the Bootstrap structure you shared.

1. Required CSS Styling #

First, add this CSS to match your layout and hide the extra items by default:

.tech-item { 
  margin-bottom: 30px; 
}
.tech-item .val { 
  display: block;
}
/* Hide extra items by default */
.hidden {
  display: none;
}
/* Optional: Style the toggle arrow (customize as needed) */
.tech-arrow {
  cursor: pointer;
  width: 20px;
  height: 20px;
  background: url('your-arrow-icon.svg') no-repeat center;
  margin: 0 auto;
}

2. PHP Template Code #

This code will loop through both repeater fields, split the items into visible and hidden groups, and output the exact Bootstrap structure you need:

<div class="row">
  <!-- Left Technical Details Column -->
  <div class="col-sm-6">
    <div class="tech-container">
      <?php
      // Initialize counters and flags for left repeater
      $left_item_count = 0;
      $left_hidden_opened = false;

      if( have_rows('technical_details_left') ):
        while( have_rows('technical_details_left') ): the_row();
          $left_item_count++;
          // Get ACF subfield values
          $tech_title = get_sub_field('tech_title');
          $tech_content = get_sub_field('tech_content');

          // Open hidden container when we reach the 5th item
          if($left_item_count > 4 && !$left_hidden_opened):
            echo '<div class="hidden">';
            $left_hidden_opened = true;
          endif;
          ?>

          <div class="tech-item">
            <span class="val"><?php echo esc_html($tech_title); ?></span>
            <span class="feature-name"><?php echo esc_html($tech_content); ?></span>
          </div>

          <?php
        endwhile;
        // Close hidden container if it was opened
        if($left_hidden_opened):
          echo '</div>';
        endif;
      endif;
      ?>
      <div class="tech-arrow"></div>
    </div>
  </div>

  <!-- Right Technical Details Column -->
  <div class="col-sm-6">
    <div class="tech-container">
      <?php
      // Initialize counters and flags for right repeater
      $right_item_count = 0;
      $right_hidden_opened = false;

      if( have_rows('technical_details_right') ):
        while( have_rows('technical_details_right') ): the_row();
          $right_item_count++;
          // Get ACF subfield values
          $tech_title = get_sub_field('tech_title');
          $tech_content = get_sub_field('tech_content');

          // Open hidden container when we reach the 5th item
          if($right_item_count > 4 && !$right_hidden_opened):
            echo '<div class="hidden">';
            $right_hidden_opened = true;
          endif;
          ?>

          <div class="tech-item">
            <span class="val"><?php echo esc_html($tech_title); ?></span>
            <span class="feature-name"><?php echo esc_html($tech_content); ?></span>
          </div>

          <?php
        endwhile;
        // Close hidden container if it was opened
        if($right_hidden_opened):
          echo '</div>';
        endif;
      endif;
      ?>
      <div class="tech-arrow"></div>
    </div>
  </div>
</div>

3. Key Details & Best Practices #

• Counter Logic: We use a per-column counter to track item positions, ensuring only the first 4 items are visible by default.
• Safety Checks: The $left_hidden_opened/$right_hidden_opened flags prevent empty .hidden containers if there are 4 or fewer items in a repeater.
• Sanitization: esc_html() is used to clean ACF field values, which is a critical WordPress security best practice to prevent XSS attacks.
• Bootstrap Compatibility: The code uses your exact .row and .col-sm-6 classes, so it integrates seamlessly with Bootstrap 4.

Optional: Toggle Functionality (JavaScript) #

If you want users to click the .tech-arrow to show/hide hidden items, add this vanilla JS:

document.querySelectorAll('.tech-arrow').forEach(arrow => {
  arrow.addEventListener('click', function() {
    const hiddenContainer = this.previousElementSibling;
    hiddenContainer.classList.toggle('hidden');
    // Optional: Swap arrow icon here (e.g., up/down)
  });
});

内容的提问来源于stack exchange，提问作者Firefox17