▼
Streaming live at 10am (PST)

Javscript delay for a show/hide class

Design help Custom code
#1

Hi all! I’m having trouble with custom code I’m using to randomly display a new Collection Item each time a button is clicked.

Disclaimer: It’s been a LONG time since I’ve played around in Javascript. The code I’m using is based off of this YouTube tutorial (Showing a random featured CMS item in Webflow | Tutorial - YouTube).

Here’s how it’s currently set up:

  1. On page load, every card in the collection is set to display:none. I have a function that randomly picks a number n. The nth card item’s class is modified, and the modified class is then shown.
  2. On button click, this same function is repeated, basically creating a “random generator” that displays a different item each time the button is clicked.
  3. I now want to add a delay for the button click function, so that I can add a transition to appear between each card generation.

Is there a Javascript function I can use for this? So far, I’ve tried setTimeOut and delay, but had no luck with either.

Here the read-only link: Webflow - DesignThis.App

Also, below is a snippet of the code I’m trying to edit:

//On page load, randomly display nth card item
	productNum = Math.floor(Math.random() * 18) + 1;
	$('.product-item:nth-of-type('+productNum+')').addClass('show');
  audienceNum = Math.floor(Math.random() * 48) + 1;
	$('.audience-item:nth-of-type('+audienceNum+')').addClass('show');
  styleNum = Math.floor(Math.random() * 41) + 1;
	$('.style-item:nth-of-type('+styleNum+')').addClass('show');
  
//On button click, reload page
	$( "#get-idea" ).click(function() {
    window.initBurst();
	$('.product-item').removeClass('show');
    $('.audience-item').removeClass('show');
    $('.style-item').removeClass('show');
    productNum = Math.floor(Math.random() * 18) + 1;
    $('.product-item:nth-of-type('+productNum+')').addClass('show');
    audienceNum = Math.floor(Math.random() * 48) + 1;
    $('.audience-item:nth-of-type('+audienceNum+')').addClass('show');
    styleNum = Math.floor(Math.random() * 41) + 1;
    $('.style-item:nth-of-type('+styleNum+')').addClass('show');
	});
#2

What was the problem when using setTimeOut? I think that would work…

1 Like
#3

@Gail_Ranger I tried writing it in again and you were right-- it worked! It looks like I had forgotten to include the function notation inside setTimeOut, so it wasn’t recognizing the subsequent series of tasks.

Sharing the correct version of the code, if anyone else finds it useful in the future :slight_smile:

	$( "#get-idea" ).click(function() {
    window.initBurst();
    setTimeout(function() {
		$('.product-item').removeClass('show');
    $('.audience-item').removeClass('show');
    $('.style-item').removeClass('show');
    productNum = Math.floor(Math.random() * 18) + 1;
    $('.product-item:nth-of-type('+productNum+')').addClass('show');
    audienceNum = Math.floor(Math.random() * 48) + 1;
    $('.audience-item:nth-of-type('+audienceNum+')').addClass('show');
    styleNum = Math.floor(Math.random() * 41) + 1;
    $('.style-item:nth-of-type('+styleNum+')').addClass('show');
    },1000);
	});