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 %}