The initial tutorial shows how to create a flexbox
based UI.
I have changed both the UI and the UX by removing the cursive font, adding a grayscale filter and modifying the event interactions. Before, you could have multiple panels open in the same time, getting less of each subsequent transition. Now you can only have the last panel you clicked open, increasing the flow adding focus in every state. Adding greyscale puts further accent on the currnt panel.
Some concepts taught:
- CSS3
flexbox
layout and nested flexbox - timing css events
- JavaScript class toggle logic
// remove the open class on all the others and toggle on current
var toggleOpen = function () {
if (!this.classList.contains('open')) {
panels.forEach(panel => {
panel.classList.remove('open')
panel.classList.remove('open-active')
})
this.classList.toggle('open')
} else {
panels.forEach(panel => {
panel.classList.remove('open')
panel.classList.remove('open-active')
})
}
}