JSFiddle - React, Tailwind, and code Playground

by artgas_pro

HTML

<!DOCTYPE html>

<head>
   <title>DOM</title>
</head>

<body>
<ul class="list">
  <li class="el">Item 1</li>
  <li class="el">Item 2</li>
  <li class="el">Item 3</li>
  <li class="el">Item 4</li>
  <li class="el">Item 5</li>
</ul>
</body>

</html>

CSS

li{
  width: fit-content;
}

JavaScript

const li = document.querySelectorAll('.el');

document.addEventListener('click', (e) => {
  if (!e.target.closest('.list')) {
    li.forEach(item => item.classList.remove('open'));
  } else {
    li.forEach(item => item != e.target.closest('.el') ? item.classList.remove('open') : item.classList.toggle('open'));
  }
});