Question 217848 in Html Question posted in
Some basic documentation can be found here.

Html – daisyui click outside to close details summary dropdown

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>
Tags:

2

Answers


  1. 0

    You can achieve the desired behaviour using javascript:

    // Retrieve all the dropdowns
const dropdowns = document.querySelectorAll("details");

// Helper to close all dropdowns except the one specified
function closeOtherDropdowns(excludeDropdown) {
  dropdowns.forEach(dropdown => {
    if (dropdown !== excludeDropdown) {
      dropdown.removeAttribute("open");
    }
  });
}

// Helper to close the dropdown when clicking outside of it
function closeDropdownOnOutsideClick(event) {
  if (!event.target.closest("details")) {
    dropdowns.forEach(dropdown => {
      dropdown.removeAttribute("open");
    });
  }
}

// Add event listeners to handle the dropdown behavior
dropdowns.forEach(dropdown => {
  dropdown.addEventListener("click", (event) => {
    closeOtherDropdowns(dropdown);
  });
});

document.addEventListener("click", closeDropdownOnOutsideClick);

    Updated example:

    // Retrieve all the dropdowns
const dropdowns = document.querySelectorAll("details");

// Helper to close all dropdowns except the one specified
function closeOtherDropdowns(excludeDropdown) {
  dropdowns.forEach(dropdown => {
    if (dropdown !== excludeDropdown) {
      dropdown.removeAttribute("open");
    }
  });
}

// Helper to close the dropdown when clicking outside of it
function closeDropdownOnOutsideClick(event) {
  if (!event.target.closest("details")) {
    dropdowns.forEach(dropdown => {
      dropdown.removeAttribute("open");
    });
  }
}

// Add event listeners to handle the dropdown behavior
dropdowns.forEach(dropdown => {
  dropdown.addEventListener("click", (event) => {
    closeOtherDropdowns(dropdown);
  });
});

document.addEventListener("click", closeDropdownOnOutsideClick);
    <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>
    Login or Signup to reply.
  2. 0

    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;
    }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search