Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-04T10:45:48.907Z
Answers.Text: Thanks Robin, that's great and gets rid of all those manual loops on page. So is much more efficient. Much appreciated.
Answers.UserDisplayName: mention79
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-04T00:35:11.893Z
Answers.LastActivityDate: 2018-02-04T00:46:54.913Z
Answers.LastEditDate: 2018-02-04T00:46:54.913Z
Answers.UserDisplayName: Robin Schambach
Body: <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>
  
Tags: <templating><loop><includejs>
Title: Simplify Twig/JS loop code
ThreadText: # 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?
  
  [![enter image description here](https://i.sstatic.net/ukiMX.png)](https://i.sstatic.net/ukiMX.png)
  
  ```
  {% 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
  
  ```
  <button data-id="dimsTarget4" class="myButton">
  <div class="myContainer" id="dimsTarget4"></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 username_1, that's great and gets rid of all those manual loops on page. So is much more efficient. Much appreciated.  
  
  ---
  
  