title
A prototype
1
2
3
4
5
6
body{ margin:0; } main{ display:flex; flex-wrap:wrap; } div{ width:33.3%; height:50vh; background:lightgray; outline:1px solid black; } div.active{ width:100%; background:yellow; } div:nth-child(1){background:tomato;} div:nth-child(2){background:brown;} div:nth-child(3){background:gold;} div:nth-child(4){background:lime;} div:nth-child(5){background:purple;} div:nth-child(6){background:navy;}
let d = document let el = d.querySelectorAll('div') for (var i = 0; i < el.length; i++) { el[i].onclick = function(){ resetBoxes() this.classList.add('active') }; } function resetBoxes() { for (var i = 0; i < el.length; i++) { el[i].classList.remove('active') } }
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code