title: Hide blocks instead of deleting
body: <p>I have a small slider that switches the preview image to the main image. It works fine now</p>
  <p><em>blade.php</em></p>
  <pre><code>&lt;div class=&quot;custom-carousel&quot;&gt;
      @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      &lt;div class=&quot;custom-carousel__title&quot;&gt;
          @if($loop-&gt;first)
          &lt;span&gt;{{ $article_block_image-&gt;title }}&lt;/span&gt; @endif
      &lt;/div&gt;
      @endforeach @endif @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
      &lt;div class=&quot;main-image&quot;&gt;
          @if($loop-&gt;first)
          &lt;picture&gt;
              &lt;source srcset=&quot;{{ $article_block_image-&gt;mobile_image }}&quot; media=&quot;(max-width: 576px)&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
              &lt;source srcset=&quot;{{ $article_block_image-&gt;main_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
              &lt;img src=&quot;{{ $article_block_image-&gt;main_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot;&gt;
          &lt;/picture&gt;
          @endif
      &lt;/div&gt;
      @endforeach @endif
      &lt;div class=&quot;img-to-select&quot;&gt;
          @if(!empty($article_block_images)) @foreach($article_block_images as $article_block_image)
          &lt;div @if($loop-&gt;first) class=&quot;img-to-select__item selected&quot; @else class=&quot;img-to-select__item&quot; @endif&gt;
              &lt;img src=&quot;{{ $article_block_image-&gt;preview_image }}&quot; alt=&quot;{{ $article_block_image-&gt;image_alt }}&quot; title=&quot;{{ $article_block_image-&gt;image_title }}&quot; data-title=&quot;{{ $article_block_image-&gt;title }}&quot; data-main-src=&quot;{{ $article_block_image-&gt;main_image }}&quot; data-mobile-src=&quot;{{ $article_block_image-&gt;mobile_image }}&quot;&gt;
          &lt;/div&gt;
          @endforeach @endif
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>js</em></p>
  <pre><code>$('.img-to-select__item').click(function () {
    $('.img-to-select__item').removeClass('selected');
    $(this).addClass('selected');
    let mainSrc = $(this).children('img').data('main-src')
    let mobileSrc = $(this).children('img').data('mobile-src')
    let title = $(this).children('img').attr('title')
    let alt = $(this).children('img').attr('alt')
    $('.main-image &gt; picture').html(`
      &lt;source srcset=&quot;${mobileSrc}&quot; media=&quot;(max-width: 576px)&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
      &lt;source srcset=&quot;${mainSrc}&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
      &lt;img src=&quot;${mainSrc}&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
    `);
    $('.custom-carousel__title &gt; span').html($(this).children('img').attr('data-title'));
  });
  </code></pre>
  <p>But now the problem is that when I switch images, all the blocks are deleted, and then they seem to be loaded back, because of which everything on the page twitches and does not work as we would like</p>
  <p>Is it possible to do something so that these blocks are loaded immediately and when switching unnecessary ones are hidden, and the necessary ones are shown?</p>
  <p>If I add <code>style=&quot;display: none&quot;</code> then how do I then need to rework the script so that everything is just hidden and shown, and not deleted and reopened</p>
  <p>If I use <code>.hide()</code> and <code>.show()</code> instead of <code>.html()</code> does it work?</p>
  <p>Like so</p>
  <pre><code>.hide(`
      &lt;source srcset=&quot;${mobileSrc}&quot; media=&quot;(max-width: 576px)&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
      &lt;source srcset=&quot;${mainSrc}&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
      &lt;img src=&quot;${mainSrc}&quot; alt=&quot;${alt}&quot; title=&quot;${title}&quot;&gt;
    `)
  </code></pre>
  <p>and what should be the check condition here at all, when using <code>.hide()</code> and <code>.show()</code></p>