How to implement this on Bitrix?

Question

1C-Bitrix

Hello.
How to implement such tabs on Bitrix? I wrote this in js

the code

$('.tabs__tab').click(function(){
    var tab_id = $(this).attr('data-id');

    $('.tabs__tab').removeClass('active');
    $('.tabs__content').fadeOut();

    $(this).addClass('active');
    $("#"+tab_id).fadeIn();
  })

  function getSlider() {
    $('.filterSlider__slider').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: true
    }).fadeIn();
  }

But the problem is that now only 1 element can be added to these tabs. And I need to have elements attached to it in each tab. There was an idea to do this through the menu, but then the page reloads.

Answer 1

And what about Bitrix? You have a classic filter through JS, go through all the elements, after setting the characteristic you need in the data attribute, and show / hide the ones you need.
Or do you need something more difficult?

Answer 2

it would be more correct to use content loading here, since it feels like there is a lot of data on one tab ^ for this you don’t even have to write anything for each component, you can enable AJAX_MODE => Y
of course, this is the server side, and you already have a display in the browser