Your support ticket
Randomize different Collection Items within one list

Hi Nelson, Please reference the 'Old Home' page for this… 1. I'd like to randomize featured stories from the 70 percent column div so that all of the stories appear in a random order. The problem is Webflow needs me to make a new div when I want to split this column into two stories side by side—which also needs me to create a new list—thus, I cannot randomize everything at once. 2. I'd like to randomize two different kinds of collection items within one list that both pull from the same collection ('Stories'). The two kinds of collection items are for non-featured stories but they differ because one item will display an image, title, author, tags and the second item will display a pull quote from that story and the author. Not all stories will have pull quotes. If it's easier to create a separate collection for stories and pull quotes I can do that too, but I would like to randomize them both within one div/list. Thanks so much!

Created on: 
March 29, 2019
Solved on: 
March 29, 2019
Minutes used: 
13
Solution
Solution video coming soon
Additional notes

Here is the code for both tickets:

For the head tag

<style>
 .top-post-item, .non-featured {display:none}
 .top-post-item.show {
  display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
  }
  .non-featured.show {display:block;}
</style>

For the end body tag:

<script>
heroNum = Math.floor(Math.random() * 4) + 1;  
$('.top-post-item:nth-of-type('+heroNum+')').addClass('show');

// All numbers are equal
var numberOne = 1;
var numberTwo = 2;
var numberThree = 3;
// run this loop until numberOne is different than numberThree
do {
   numberOne = Math.floor(Math.random() * 13) + 1;
} while(numberOne === numberThree);
// run this loop until numberTwo is different than numberThree and numberOne
do {
   numberTwo = Math.floor(Math.random() * 13) + 1;
} while(numberTwo === numberThree || numberTwo === numberOne);
$('.non-featured:nth-of-type('+numberOne+')').addClass('show');
$('.non-featured:nth-of-type('+numberTwo+')').addClass('show');
</script>