<p>You can select elements by class and give your html elements custom data attributes.</p>

<p>When this is your clickable html element with the corresponding div</p>

<pre><code>&lt;button data-id="dimsTarget4" class="myButton"&gt;
&lt;div class="myContainer" id="dimsTarget4"&gt;&lt;/div&gt;
</code></pre>

<p>Your jquery could be</p>

<pre><code>$('.myButton').click(function(){
    var containerId = $(this).data('id');
    $('.myContainer').removeClass( "is-active" );
    $('#'+containerId).addClass( "is-active" );
})
</code></pre>

<p>And that's basically it. You'll remove the class from all your divs and add it to the one specified in your <code>data-id</code> attribute.</p>

<p>You won't need any twig elements in your JavaScript (which is much better) and define everything in your twig template. That way your Javascript will behave independently. When you change your html you won't need to change your Javascript that much and you can reuse the code</p>

<p>Note: I just used the button as an example. You can insert whatever class name or html element you like. Since you didn't mention the structure of your html I decided to use a button </p>

CC BY-SA 3.0
2018-02-04T10:45:48.907Z
Thanks Robin, that's great and gets rid of all those manual loops on page. So is much more efficient. Much appreciated.
mention79
CC BY-SA 3.0
2018-02-04T00:35:11.893Z
2018-02-04T00:46:54.913Z
2018-02-04T00:46:54.913Z
Robin Schambach
<p>Can any help simplify this js/twig code? The code links to some tabs that show floorplans of the property being sold. The specified aria-controls refers to a supertable field called <code>floorLevel</code> that has the <code>loop.index</code> included, so for example if I put <code>[aria-controls='{{ row.floorLevel }}{{ loop.index }}']</code> it would output those names. I got it working so that when the user clicks on the tab it also changes the separate information about the measurements, but I couldn’t find of a less manual way of doing it, but I’m sure there must be an easier way?</p>

<p><a href="https://i.sstatic.net/ukiMX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ukiMX.png" alt="enter image description here"></a></p>

<pre><code>{% includejs %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='groundFloor1']" ).on( "click", function() {
  $( "#dimsTarget1" ).addClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='firstFloor2']" ).on( "click", function() {
  $( "#dimsTarget2" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='secondFloor3']" ).on( "click", function() {
  $( "#dimsTarget3" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='thirdFloor4']" ).on( "click", function() {
  $( "#dimsTarget4" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='basement5']" ).on( "click", function() {
  $( "#dimsTarget5" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
});
{% endfor %}
{% endincludejs %}
</code></pre>

<templating><loop><includejs>
Simplify Twig/JS loop code
# Simplify Twig/JS loop code

(Asked by: username_0 on 2018-02-03)

Can any help simplify this js/twig code? The code links to some tabs that show floorplans of the property being sold. The specified aria-controls refers to a supertable field called floorLevel that has the loop.index included, so for example if I put [aria-controls='{{ row.floorLevel }}{{ loop.index }}'] it would output those names. I got it working so that when the user clicks on the tab it also changes the separate information about the measurements, but I couldn’t find of a less manual way of doing it, but I’m sure there must be an easier way?

{% includejs %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='groundFloor1']" ).on( "click", function() {
  $( "#dimsTarget1" ).addClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='firstFloor2']" ).on( "click", function() {
  $( "#dimsTarget2" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='secondFloor3']" ).on( "click", function() {
  $( "#dimsTarget3" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='thirdFloor4']" ).on( "click", function() {
  $( "#dimsTarget4" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget5" ).removeClass( "is-active" );
});
{% endfor %}
{% for row in entry.floorplans.limit(1) %}
$( "[aria-controls='basement5']" ).on( "click", function() {
  $( "#dimsTarget5" ).addClass( "is-active" );
  $( "#dimsTarget1" ).removeClass( "is-active" );
  $( "#dimsTarget2" ).removeClass( "is-active" );
  $( "#dimsTarget3" ).removeClass( "is-active" );
  $( "#dimsTarget4" ).removeClass( "is-active" );
});
{% endfor %}
{% endincludejs %}

**Tags:** templating, loop, includejs


---

## 1 answers

### Answer by username_1 on 2018-02-04. Score: 4 | Accepted answer

You can select elements by class and give your html elements custom data attributes.
When this is your clickable html element with the corresponding div



Your jquery could be
$('.myButton').click(function(){
    var containerId = $(this).data('id');
    $('.myContainer').removeClass( "is-active" );
    $('#'+containerId).addClass( "is-active" );
})

And that's basically it. You'll remove the class from all your divs and add it to the one specified in your data-id attribute.
You won't need any twig elements in your JavaScript (which is much better) and define everything in your twig template. That way your Javascript will behave independently. When you change your html you won't need to change your Javascript that much and you can reuse the code
Note: I just used the button as an example. You can insert whatever class name or html element you like. Since you didn't mention the structure of your html I decided to use a button

> **Comments:**
> **username_0**: Thanks Robin, that's great and gets rid of all those manual loops on page. So is much more efficient. Much appreciated.  

---

