Is it possible to have a set of repeatable that will generate the following code sequence in which the elements will have the following form of sequential ids:

Code: Select all

<div class="article-box">
  <p class="article-summary" id="modal-intro-1">Example Intro</p>
  <a class="article-toggler" id="modal-cta-1">Example cta</a>
</div>
<div class="modal" id="modal-1">
  <div id="modal-close-1">
    close modal-button
  </div>
  <div id="modal-main-1">
    Example Article text
  </div>
</div>
<div class="article-box">
  <p class="article-summary" id="modal-intro-2">Example Intro</p>
  <a class="article-toggler" id="modal-cta-2">Example cta</a>
</div>
<div class="modal" id="modal-2">
  <div id="modal-close-2">
    close modal-button
  </div>
  <div id="modal-main-2">
    Example Article text
  </div>
</div>
<div class="article-box">
  <p class="article-summary" id="modal-intro-3">Example Intro</p>
  <a class="article-toggler" id="modal-cta-3">Example cta</a>
</div>
<div class="modal" id="modal-3">
  <div id="modal-close-3">
    close modal-button
  </div>
  <div id="modal-main-3">
    Example Article text
  </div>
</div>

The ids for the first code element block are modal-intro-1, modal-cta-1, modal-1, modal-close-1 and modal-main-1
For the second code element block, it will be modal-intro-2, modal-cta-2, modal-2, modal-close-2 and modal-main-2
For the nth code element block, it will be modal-intro-n, modal-cta-n, modal-n, modal-close-n and modal-main-n

I need these ids to trigger the respective modals using javascript. How can I achieve this?

[KK]

Hi,

You can always place (temporarily) a <cms:dump /> tag in your code to see exactly which variables are available for use at a particular point.

If placed within <cms:show_repeatable> block, you'll notice that the 'k_count' variable keeps track of which row is being iterated (i.e. it starts from 1 and keeps increasing with each row). You may use it to create the labels you need.

Hope this helps.

Hi,

You can always place (temporarily) a <cms:dump /> tag in your code to see exactly which variables are available for use at a particular point.

If placed within <cms:show_repeatable> block, you'll notice that the 'k_count' variable keeps track of which row is being iterated (i.e. it starts from 1 and keeps increasing with each row). You may use it to create the labels you need.

Hope this helps.

Thanks for your reply. I really appreciate it. Can you kindly show me how with a piece of code as illustration? Thanks

[KK]

Sure. Following can be used as an example -

Code: Select all

<cms:show_repeatable 'my_repeatable'>
    <div class="article-box">
      <p class="article-summary" id="modal-intro-<cms:show k_count />">Example Intro</p>
      <a class="article-toggler" id="modal-cta-<cms:show k_count />">Example cta</a>
    </div>
    <div class="modal" id="modal-<cms:show k_count />">
      <div id="modal-close-<cms:show k_count />">
        close modal-button
      </div>
      <div id="modal-main-<cms:show k_count />">
        Example Article text
      </div>
    </div>
</cms:show_repeatable>

Sure. Following can be used as an example -

Code: Select all

<cms:show_repeatable 'my_repeatable'>
    <div class="article-box">
      <p class="article-summary" id="modal-intro-<cms:show k_count />">Example Intro</p>
      <a class="article-toggler" id="modal-cta-<cms:show k_count />">Example cta</a>
    </div>
    <div class="modal" id="modal-<cms:show k_count />">
      <div id="modal-close-<cms:show k_count />">
        close modal-button
      </div>
      <div id="modal-main-<cms:show k_count />">
        Example Article text
      </div>
    </div>
</cms:show_repeatable>

Perfect. Thank you.