<div class="js__dropdown">
  <div class="dropdown js__dropdown-toggle">Интернет-витрина</div>

  <div class="dropdown__content">
    информационная витрина

    <button class="js__dropdown-close" type="button">
      <svg class="close__icon">
        <use xlink:href="sprite.svg#close"></use>
      </svg>X
    </button>
  </div>
</div>

<div class="js__dropdown">
  <div class="dropdown js__dropdown-toggle">компании Group</div>

  <div class="dropdown__content">
    Наш сайт является

    <button class="js__dropdown-close" type="button">
      <svg class="close__icon">
        <use xlink:href="sprite.svg#close"></use>
      </svg>X
    </button>
  </div>
</div>
body {
  display: flex;
}
.close__icon,
.dropdown__content {
  display: none;
}

.dropdown {
  width: 220px;
  padding: 5px;
  margin-right: 15px;
  background-color: #82ffee;
  cursor: pointer;
}
.dropdown__content {
  width: 220px;
  padding: 15px 5px;
  background-color: #ccc;
}
.dropdown-active .dropdown__content {
  display: block;
}
document.addEventListener("DOMContentLoaded", () => {
  const dropdown = document.querySelectorAll(".js__dropdown");
  const dropdownActive = "dropdown-active";

  document.addEventListener("click", (event) => {
    dropdown.forEach((item) => {
      if (!event.composedPath().includes(item)) {
        item.classList.remove(dropdownActive);
      }
    });
  });

  dropdown.forEach((item) => {
    item.addEventListener("click", (event) => {
      if (
        event.target.classList.contains("js__dropdown-toggle") ||
        event.target.closest(".js__dropdown-close")
      ) {
        item.classList.toggle(dropdownActive);
      }
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.