How can I display the field in the tab that was active on save? I'm using Drupal 8 paragraphs. I have a banner_header paragraph that contains three fields, 

field_active_callout_tab (boolean)

field_banner_header_single (entity reference revision: paragraph)

field_banner_header_multi (entity reference revision: paragraph)

two of which are displayed in tabs like so:



Here is how the banner_header paragraph shows up on the content type edit form:





When I save the content, I want the page to render with the paragraph from the tab that was active on save.

What I've done so far:

I added classes to the tabs which you can see in the image of the form display: .single-link and .multi-link.  I was told that I also needed to create a boolean field to manage the display behavior, which I did with field_active_callout_tab. The way that was suggested this to work is, the bool will change depending on which tab is selected, and then I can use the bool value to determine which field is to be displayed in the twig template. The default class for this boolean seems to be '.option'.

I created a custom js file to check the status of the tab: 

(function($, Drupal) {

/* Add span to wysiwyg button classes for alignment
------------------------------------ */
Drupal.behaviors.calloutControl = {
      attach: function (context, settings) {
            $('.single-link').click(function () {
                  $('.option').prop('checked', true);
            });
            $('.multi-link').click(function () {
                  $('.option').prop('checked', false);
            });
      }
};

})(jQuery, Drupal);


And here is the banner_header template:

&lt;div class="callout-options"&gt;
     {% if content.option == true %}
          {{ content.field_banner_header_single }}
     {% else %}
          {{ content.field_banner_header_multi }}
     {% endif %}
&lt;/div&gt;


The bool does not change depending on the tab selection. It appears to not be impacted at all. The page will only render with the multi link paragraph, despite single link setting tab being open on save.


Is the bool necessary? If so, what am I missing?
If the bool is not necessary, what should I do next?


How can I get the paragraph field in the tab that was active on save, to render on the page?
I think it is being called multiple times. To avoid that try Change your JS as below

$(context).find('.single-link').click(function () {
  $(context).find('.option').prop('checked', true);
});
$(context).find('.multi-link').click(function () {
  $(context).find('.option').prop('checked', false);
});


OR

change the on click() event to hasClass() the will be classes added to the active tab