title: How can I switch to a tab to another ?
body: <p>I have two tabs 
  <a href="https://i.stack.imgur.com/Qxfg6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qxfg6.png" alt="enter image description here"></a></p>
  
  <p>And I need to switch to the "VOTRE SÉLECTION", erase the content of "NOTRE SELECTION DU MOMENT" and display other contents instead.</p>
  
  <p>I know it's some basic AJAX but I am a backend dev and I do not have time to learn this right now :( </p>
  
  <p>This is the code : </p>
  
  <pre><code>{{ include('_tabs.html.twig') }}
  &lt;section class="list"&gt;
      &lt;div class="container"&gt;
          &lt;div class="item-container"&gt;
              {% if isAmiral %}
                  {% if (distance &lt; 400 and distance &gt; 200) or isParis %}
                      {{ blocks.home_selection_200_450km_idf|raw }}
                  {% elseif distance &lt; 200 %}
                      {{ blocks.home_selection_proximite|raw }}
                  {% else %}
                      {{ blocks.selection|raw }}
                  {% endif %}
              {% else %}
                  {{ blocks.selection|raw }}
              {% endif %}
              {# CLEAR #}
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="list-btn"&gt;
              &lt;a href="{{ rewrite_path(highlightmenu, {locale: app.request.locale}) }}"&gt;{{ 'button.all_highlights'|trans }}&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>and tabs.html contains this : </p>
  
  <pre><code>&lt;section class="tabs-container full-image mode-{{ context }}"&gt;
  
      {% if (context == 'amiral') %}
          &lt;nav class="tabs amiral"&gt;
              &lt;ul class="list-inline"&gt;
                  &lt;li class="tab amiral-A"&gt;&lt;a href="" class="tab-btn amiral-btn-A"&gt;{{ 'label.our_selection'|trans }}&lt;/a&gt;&lt;/li&gt;&lt;!--
               --&gt;&lt;li class="tab amiral-B selected"&gt;&lt;a href="" class="tab-btn amiral-btn-B"&gt;{{ 'label.your_selection'|trans }}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      {% elseif (context == 'sejour') %}
          &lt;nav class="tabs sejour A-selected"&gt;
              &lt;ul class="list-inline"&gt;
                  &lt;li class="tab sejour-A selected"&gt;&lt;a href="" class="tab-btn sejour-btn-A"&gt;{{ 'label.favorites'|trans }}&lt;/a&gt;&lt;/li&gt;&lt;!--
               --&gt;&lt;li class="tab sejour-B"&gt;&lt;a href="" class="tab-btn sejour-btn-B"&gt;{{ 'link.account_wishlist'|trans }}&lt;/a&gt;&lt;/li&gt;&lt;!--
               --&gt;&lt;li class="tab sejour-C"&gt;&lt;a href="" class="tab-btn sejour-btn-C"&gt;{{ 'label.around'|trans }}&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      {% endif %}
  
  &lt;/section&gt;
  </code></pre>
  
  <p>JS : </p>
  
  <pre><code>if ($('.tabs.amiral').length == 1) {
      $('.tab-btn').on('click', function(e) {
          e.preventDefault();
          $(document).find('nav.tabs .tab').removeClass('selected');
          $(this).parent().addClass('selected');
      });
  }
  </code></pre>
  
  <p>To make this more clear, I need to do somethink like this : </p>
  
  <pre><code>{% if VOTRE_SELECTION %}
      {{ display_block_a }}
  {% else %}
      {{ display_block_B }}
  </code></pre>
  
  <p>So what do I need to add to make this work ?</p>