Untitled
unknown
javascript
2 years ago
1.5 kB
2
Indexable
document.addEventListener('DOMContentLoaded', function () { const buttons = document.querySelectorAll('.button'); const boxes = document.querySelectorAll('.box'); const rows = document.querySelectorAll('.row'); buttons.forEach((button, index) => { button.addEventListener('click', function () { //Check if the button is already active const isActive = this.classList.contains('activeBorderColor'); //Reset all buttons and boxes to their initial state, with animation buttons.forEach(button => button.classList.remove('activeBorderColor')); boxes.forEach(box => { box.style.transition = 'width 1s, height 1s'; box.style.width = ''; box.style.height = ''; }); if (!isActive) { //Activate animation and color for the selected button this.classList.add('activeBorderColor'); //Using index to find the corresponding row and box, since they belong to the same row const targetRow = rows[index]; const targetBox = targetRow.querySelector('.box'); //Activate animation for the box corresponding to the button you pressed targetBox.style.width = '12vmin'; targetBox.style.height = '12vmin'; } }); }); });
Editor is loading...
Leave a Comment