I can;t get my around repeatable regions with div columns and lists, below is what I am trying to achieve without couch tags integrated

Code: Select all

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
                  <ul class="marker-list">
                     <li>Startup problems</li>
                     <li>Computer crashes</li>
                     <li>Maintenance contracts</li>
                     <li>Blue screen</li>
                  </ul>
               </div>
               <div class="col-sm-4 animation" data-animation="fadeIn" data-animation-delay="0s">
                  <ul class="marker-list">
                     <li>Tune up &amp; optimisation services</li>
                     <li>Password removal/reset</li>
                     <li>Software issues resolved</li>
                     <li>Internet connection difficulties</li>
                  </ul>
               </div>
               <div class="col-sm-4 animation" data-animation="fadeInRight" data-animation-delay="0.5s">
                  <ul class="marker-list">
                     <li>Hardware upgrades</li>
                     <li>Software installation</li>
                     <li>Operating system install/reinstall</li>
                     <li>Laptop &amp; Desktop upgrades</li>
                  </ul>
               </div>

Below is what I have with couch tags integrated

Code: Select all

<cms:show_repeatable 'other_services_lists'>
                        <cms:set my_count="<cms:zebra '1' />" />
                        <cms:if my_count='1'>
               <div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
                        </cms:if>
                  <ul class="marker-list">
                     <li><cms:show other_services_list_item/></li>
                  </ul>
                        <cms:if my_count='1' || k_count=k_total_records>
                            </div>
                        </cms:if>
                    </cms:show_repeatable >

That outputs the code below

Code: Select all

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
    <ul class="marker-list">
   <li>Startup problems</li>
   </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
   <ul class="marker-list">
   <li>Computer crashes</li>
   </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Maintenance contracts</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Blue screen</li>
  </ul>
  </div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Tune up &amp; optimisation services</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Password removal/reset</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Software issues resolved</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Internet connection difficulties</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Hardware upgrades</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Software installation</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Operating system install/reinstall</li>
  </ul>
</div>

<div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
  <ul class="marker-list">
  <li>Laptop &amp; Desktop upgrades</li>
  </ul>
</div>

Could someone help please as I have never used repeatable regions with div columns and lists together before

[KK]

Following post describes a way of breaking a page listing into groups -
viewtopic.php?p=22909#p22915

The same technique can very well be applied to repeatable-regions also.
Assuming your repeatable-region is named 'my_repeatable', please do the following and you'll see the variables (first row, last row etc.) we need -

Code: Select all

<cms:show_repeatable 'my_repeatable'>
    <cms:dump />
</cms:show_repeatable>

Using those, the original code linked above now becomes -

Code: Select all

<cms:set my_max_columns='4' 'global' />

<cms:show_repeatable 'my_repeatable'>
    <cms:if k_first_row >
        <h5>open</h5>
    </cms:if>
    
    <h3>Row <cms:show k_count /> - show your fields here</h3>
    
    <cms:if k_last_row || "<cms:not "<cms:mod k_count my_max_columns />" />" >
        <h5>close</h5>

        <cms:if "<cms:not k_last_row />" >
            <h5>open</h5>
        </cms:if>
    </cms:if>
</cms:show_repeatable>

You can now place any code to replace the 'open' and 'close' blocks.

Your specific code becomes this -

Code: Select all

<cms:set my_max_columns='4' 'global' />

<cms:show_repeatable 'my_repeatable'>
    <cms:if k_first_row >
        <div class="col-sm-4 animation" data-animation="fadeInLeft" data-animation-delay="0.5s">
            <ul class="marker-list">
    </cms:if>
    
    <li>show your fields here</li>
    
    <cms:if k_last_row || "<cms:not "<cms:mod k_count my_max_columns />" />" >
            </ul>
        </div>

        <cms:if "<cms:not k_last_row />" >
            <div class="col-sm-4 animation" data-animation="fadeIn<cms:zebra '' 'Left' />" data-animation-delay="0.5s">
                <ul class="marker-list">
        </cms:if>
    </cms:if>
</cms:show_repeatable>

Hope this helps,

Thank you so much KK, 100% as always. I'll try that shortly a post a update

Just tried the code and has worked perfect, thank you again so much KK

[KK]

You are welcome. I am glad it helped.