<!-- using divs and spans -->
<button class='randomize-fruits'>Random Fruits</button>
<div class='fruits'>
<span class='fruits-fruit'>Banana</span>
<span class='fruits-fruit'>Apple</span>
<span class='fruits-fruit'>Orange</span>
<span class='fruits-fruit'>Pear</span>
<span class='fruits-fruit'>Nectarine</span>
</div>
<!-- using and unordered list -->
<button class='randomize-veggies'>Random Veggies</button>
<ul class='veggies'>
<li class='veggies-veggie on'>Broccoli</li>
<li class='veggies-veggie on'>Carrots</li>
<li class='veggies-veggie on'>Potatoes</li>
<li class='veggies-veggie on'>Spinach</li>
<li class='veggies-veggie on'>Turnips</li>
</ul>
.fruits {
display: flex;
margin: 1rem;
&-fruit {
&:not(.hidden) ~ &:not(.hidden) { // select the second of two visible items
&:before {
content: ', '; // and put a comma before it
}
}
&.hidden {
display: none;
}
}
}
// a little fancier, uses transitions
.veggies {
padding-inline-start: 0;
list-style: none;
margin: 1rem;
display: flex;
&-veggie {
display: flex;
position: relative;
max-width: 0;
opacity: 0;
transition: max-width .25s, opacity .25s, margin .25s;
&:before {
content: ',';
display: block;
vertical-align: baseline;
opacity: 0;
transition: opacity .5s;
margin: 0 .25rem 0 -.5rem;
}
&.on {
max-width: 100px; // set this close to the widest possible item
opacity: 1;
margin-right: .5rem;
}
&.on ~ &.on {
&:before {
opacity: 1;
}
}
}
}
View Compiled
const fruits = Array.from(document.querySelectorAll('.fruits-fruit'));
const veggies = Array.from(document.querySelectorAll('.veggies-veggie'));
document.querySelector('.randomize-fruits').addEventListener('click', () => {
fruits.forEach(fruit => {
fruit.classList[Math.random() < .5 ? 'add' : 'remove']('hidden');
});
});
document.querySelector('.randomize-veggies').addEventListener('click', () => {
veggies.forEach(veggie => {
veggie.classList[Math.random() < .5 ? 'add' : 'remove']('on');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.