JS

 avatar
unknown
javascript
5 months ago
1.1 kB
16
Indexable
document.querySelectorAll('.item-row').forEach((row, index) => {
  row.addEventListener('click', (event) => {
    if (event.target.tagName !== 'A' && event.target.tagName !== 'BUTTON') {
      const descriptionRow = document.querySelectorAll('.description-row')[index];
      const toggleButton = row.querySelector('.toggle-button');

      if (descriptionRow.classList.contains('expanded')) {        
        descriptionRow.classList.remove('expanded');
        toggleButton.classList.remove('rotate');
        setTimeout(() => {
          descriptionRow.style.maxHeight = '0';
          descriptionRow.style.opacity = '0';
          descriptionRow.style.display = 'none'; 
        }, 400);  
      } else {
        descriptionRow.style.display = 'table-row'; 
        setTimeout(() => {
          descriptionRow.classList.add('expanded');
          descriptionRow.style.maxHeight = '200px';  
          descriptionRow.style.opacity = '1';
        }, 10);  
        toggleButton.classList.add('rotate');
      }
    }
  });
});
Editor is loading...
Leave a Comment