Show 1 of 4 hidden elements randomly on Load

Design help Custom code
#1

I would like to have, say 4 elements all hidden and on page load one of them randomly shows.

Showing a random featured CMS item in Webflow | Tutorial - YouTube this is close to what i want, but its for cms items, i want it for non cms items.

I can’t really share a ready only of the site as its for someone elses business. Hope thats ok and any help appreciated. Thanks.

#2

I had this code in my snippet bucket. Change as needed.

var elements = document.getElementsByClassName('hidden');
var randomElement = elements[Math.floor(Math.random() * elements.length)];
randomElement.style.display = 'block';
#3

Thanks for your response i ended up finding this which worked for me. I will have a play around with your thanks :slight_smile:

var elems = $(".t1");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}