JSFiddle - React, Tailwind, and code Playground
HTML
<div class="dropdown">
Button
<div class="dropdown-menu">
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Заголовок скатился которой грамматики несколько что щеке, снова переулка! Взобравшись!
</div>
</div>
<div class="dropdown">
Button
<div class="dropdown-menu">
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Заголовок скатился которой грамматики несколько что щеке, снова переулка! Взобравшись!
</div>
</div>
<div class="dropdown">
Button
<div class="dropdown-menu">
Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Заголовок скатился которой грамматики несколько что щеке, снова переулка! Взобравшись!
</div>
</div>
CSS
.hidden {
display: none;
}
JavaScript
const dropdowns = [...document.querySelectorAll('.dropdown')]
const initDropdown = elem =>
elem.addEventListener('click', function() {
this
.querySelector('.dropdown-menu')
.classList
.toggle('hidden', false)
})
const closeMenu = dropdown =>
dropdown
.querySelector('.dropdown-menu')
.classList
.toggle('hidden', true)
dropdowns.forEach(initDropdown)
document.addEventListener('click', () => {
dropdowns.forEach(closeMenu)
}, true)