Hide element if collection list contains more than 3 items

Design help Custom code
1

Hi there,

Need a bit of help with some code as I have NO coding skills :cry:

I would like to hide an element (e.g. a heading) when the collection list contains more than 3 items in desktop view, 2 items in iPad view and more than 0 in mobile view.

Tried Google and thought I made it - however, it doesn’t work.
This it what I got so fare:

<script>

@media (max-width: 991px) {
if(!$('.collection-list').length > 3){	
  $('.heading').hide();
}


@media (max-width: 767px) {
if(!$('.collection-list').length > 2){	
  $('.heading').hide();
}


@media (max-width: 479px) {
if(!$('.collection-list').length > 0){	
  $('.heading').hide();
}

</script>

I hope somebody can help me :smiley:

Regards

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Ole_Hansen,

Try this out in Page Settings > Custom Code > Before tag:

<script>
$(function () {
   if ($(window).width() < 991) {
      if ($('.w-dyn-item').length > 3) {
         $('.heading').hide();
      }
   }
});

$(function () {
   if ($(window).width() < 767) {
      if ($('.w-dyn-item').length > 2) {
         $('.heading').hide();
      }
   }
});

$(function () {
   if ($(window).width() < 479) {
      if ($('.w-dyn-item').length > 0) {
         $('.heading').hide();
      }
   }
});

</script>

I’m not too good with jQuery but this seems to be working for me when I use ‘Limit Items’ on a collection list and resize window.

Hope this helps!

1 Like
3

Hi Milan

Thanks a lot - I will try it out. Really appreciate your help.