daisyui click outside to close details summary dropdown

Question

here I want to create a dropdown using details summary in daisyUI

I want when the first dropdown is clicked the dropdown opens and when I click the second dropdown I want the second dropdown to open but the first dropdown closes automatically

the same applies when I click anywhere outside the dropdown area when there is an open dropdown the dropdown will automatically close

i have tried using Dropdown menu (Click outside to close) from daisyUI instead of using details summary, but here I want to use details summary with the reason I need the icon from the details summary which changes automatically when dropdown

how to do it please help and thank you

<link href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/3.5.0/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
  
<div class="flex-1"> 
  <ul class="menu menu-horizontal px-1">
    <li><a>Dashboard</a></li>
    <li>
      <details>
        <summary>Master Data</summary>
        <ul class="p-2 bg-base-100">
          <li><a>Link 1</a></li>
          <li><a>Link 2</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary>Stocks</summary>
        <ul class="p-2 bg-base-100">
          <li><a>Link 1</a></li>
          <li><a>Link 2</a></li>
        </ul>
      </details>
    </li>
    <li>
    </li>
  </ul>
</div>

score 1 · Accepted Answer · answered Jul 28 '23 at 10:13

Add a class to like this <details class="dropdown">

And then write some javascript like this

    window.addEventListener('click', function(e) {
  document.querySelectorAll('.dropdown').forEach(function(dropdown) {
    if (!dropdown.contains(e.target)) {
      // Click was outside the dropdown, close it
      dropdown.open = false;
    }
  });
});

daisyui click outside to close details summary dropdown

1 Answers1