CODEWITHSUNDEEP
phpwordpressadvanced-custom-fields
Firefox17
Firefox17

Reputation: 15

Looping ACF repeater field - first 4 elements and continue looping within a nested DIV

I have a repeater field in ACF which I would like to loop and get first 4 elements regularly and then creating a DIV and continue looping the rest of the elements within the created DIV

Here is an example of what I am trying to achieve:

.tech-item {
margin-bottom: 30px;
}
.tech-item .val {
display: block
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6">
    <div class="tech-container">
      <div class="tech-item"><span class="val">Tech Info 1</span><span class="feature-name">Value 1</span></div>
      <div class="tech-item"><span class="val">Tech Info 2</span><span class="feature-name">Value 2</span></div>
      <div class="tech-item"><span class="val">Tech Info 3</span><span class="feature-name">Value 3</span></div>
      <div class="tech-item"><span class="val">Tech Info 4</span><span class="feature-name">Value 4</span></div>
      <div class="hidden">
        <div class="tech-item"><span class="val">Tech Info 5</span><span class="feature-name">Value 5</span></div>
        <div class="tech-item"><span class="val">Tech Info 6</span><span class="feature-name">Value 6</span></div>
        <div class="tech-item"><span class="val">Tech Info 7</span><span class="feature-name">Value 7</span></div>
        <div class="tech-item"><span class="val">Tech Info 8</span><span class="feature-name">Value 8</span></div>
        <div class="tech-item"><span class="val">Tech Info 9</span><span class="feature-name">Value 9</span></div>
        <div class="tech-item"><span class="val">Tech Info 10</span><span class="feature-name">Value 10</span></div>
      </div>
      <div class="tech-arrow"></div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="tech-container">
      <div class="tech-item"><span class="val">Tech Info 1</span><span class="feature-name">Value 1</span></div>
      <div class="tech-item"><span class="val">Tech Info 2</span><span class="feature-name">Value 2</span></div>
      <div class="tech-item"><span class="val">Tech Info 3</span><span class="feature-name">Value 3</span></div>
      <div class="tech-item"><span class="val">Tech Info 4</span><span class="feature-name">Value 4</span></div>
      <div class="hidden">
        <div class="tech-item"><span class="val">Tech Info 5</span><span class="feature-name">Value 5</span></div>
        <div class="tech-item"><span class="val">Tech Info 6</span><span class="feature-name">Value 6</span></div>
        <div class="tech-item"><span class="val">Tech Info 7</span><span class="feature-name">Value 7</span></div>
        <div class="tech-item"><span class="val">Tech Info 8</span><span class="feature-name">Value 8</span></div>
        <div class="tech-item"><span class="val">Tech Info 9</span><span class="feature-name">Value 9</span></div>
        <div class="tech-item"><span class="val">Tech Info 10</span><span class="feature-name">Value 10</span></div>
      </div>
      <div class="tech-arrow"></div>
    </div>
  </div>
</div>

So I'd like to create with a loop the first 4 tech-item elements, then create the hidden DIV and continue looping within the hidden DIV.

Each column has it's own repeater field: technical_details_left and technical_details_right

With subfields tech_title that is represented as Tech Info 1, 2 and etc; The second subfield is tech_content that is represented as Value 1, 2 and etc.

Thanks in advance

Upvotes: 0

Views: 555

Answers (1)

Balwant
Balwant

Reputation: 755

Please try this :

<div class="row">
<?php
    $leftDetails = get_field('technical_details_left');
    $rightDetails = get_field('technical_details_right');
    $leftDSize = sizeof($leftDetails);
    $rightDSize = sizeof($rightDetails);
    if($leftDetails){
    ?>
    <div class="col-sm-6">
        <div class="tech-container">
        <?php foreach($leftDetails as $key=>$ldetail){
        if($key == 4){ echo '<div class="hidden">';  }  
        echo '<div class="tech-item"><span class="val">'.$ldetail['tech_title'].'</span><span class="feature-name">'.$ldetail['tech_content'].'</span></div>';
        if((($leftDSize - 1) == $key) && ($key > 3)){ echo '</div>'; } 
        } 
        echo '<div class="tech-arrow"></div>';
        echo '</div>';
        echo '</div>';  
    } ?>

<?php if($rightDetails){
    ?>
    <div class="col-sm-6">
        <div class="tech-container">
        <?php foreach($rightDetails as $key1=>$rdetail){
        if($key1 == 4){ echo '<div class="hidden">';  }     
        echo '<div class="tech-item"><span class="val">'.$rdetail['tech_title'].'</span><span class="feature-name">'.$rdetail['tech_content'].'</span></div>';
        if((($rightDSize - 1) == $key1) && ($key1 > 3)){ echo '</div>'; } 
        } 
        echo '<div class="tech-arrow"></div>';
        echo '</div>';
        echo '</div>';  
} ?>
</div>

Upvotes: 0

Related Questions