How to properly display GIFs depending on the device?

Question

JavaScript

Hello !

How to properly display GIFs depending on the device?

There are GIF files with sets of steps for iPhone and Android,
when you click on a specific step, a GIF for this step should appear (determine by numbers, respectively)
and, depending on the user's current device, if it is a poppy or iPhone, then the instruction is for iPhone, in other cases, Android .

Did it like this:

$(".ios, .iphone, .ipad, .ipod, .macos").ready(function(){
  $(".andro_dev").hide();
  $(".apple_dev").show();
});

$('.js-tab-trigger').click(function() {
   var id = $(this).attr('data-tab'),
       content = $('.js-tab-content[data-tab="'+ id +'"]');
   
   $('.js-tab-trigger.active').removeClass('active');
   $(this).addClass('active');
   
   $('.js-tab-content.active').removeClass('active');
   content.addClass('active');
});

I achieved the display of all gifs at once, I was able to remove them for apple ones, but whatever the steps and in accordance with the device did not work

<div class="d-flex align-items-end justify-content-end tabs steps">			
          <div class="tab-content device">
            <img class="tab-content__item js-tab-content active andro_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/Step_01.gif" alt="step1">
            <img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="1" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_01.gif" alt="step1">
            <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="2" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_02.gif" alt="step1">
            <img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="2" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_02.gif" alt="step2">
            <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="3" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_03.gif" alt="step3">
            <img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="3" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_03.gif" alt="step3">
            <img class="tab-content__item js-tab-content andro_dev dev_mob" data-tab="4" data-toggle="collapsed" width="186px" height="384px" src="img/gifs/Step_04.gif" alt="step4">
            <img class="tab-content__item js-tab-content active apple_dev dev_mob" data-tab="4" data-toggle="collapse" width="186px" height="384px" src="img/gifs/ap_04.gif" alt="step4">
          </div>

          <div class="tabs stepstoinst">

                <div class="steps_title"><h2 class="">Простая установка</h2></div>

                <div class="tab-header step">
                  <a href="#step1" class="tab-header__item js-tab-trigger active"   data-tab="1"><span class="step_number">1</span><p>В главном меню на сайте выберите<br> версию Android</p></a>
                </div>
                <div class="tab-header step">
                  <a href="#step2" class="tab-header__item js-tab-trigger"  data-tab="2"><span class="step_number">2</span><p>Сохраните файл на телефон<br> и запустите установку</p></a>
                </div>
                <div class="tab-header step">
                  <a href="#step3" class="tab-header__item js-tab-trigger"  data-tab="3"><span class="step_number">3</span><p>Разрешите установку<br> приложения из<br> неизвестных источников</p></a>
                </div>
                <div class="tab-header step">
                  <a href="#step4" class="tab-header__item js-tab-trigger"  data-tab="4"><span class="step_number">4</span><p>Откройте приложение,<br> выберите регистрацию<br> либо вход</p></a>
                </div>
          </div>
        </div>

Can you please tell me how to write a function?