Bootstrap 5.3. Закрыть cворачиваемое содержимое при клике вне элемента

Сворачиваемое содержимое создаётся с помощью Bootstrap 5.3.3.
Добавляем к нопке класс .show-element, если сворачиваемых блоков несколько или #showElement, если блок один.
<button class="btn btn-primary show-element" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Кнопка с data-target
  </button>

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Кстати, диаграммы связей, вне зависимости от их уровня, должны быть рассмотрены исключительно в разрезе маркетинговых и финансовых предпосылок. Каждый из нас понимает очевидную вещь: высокотехнологичная концепция общественного уклада в значительной степени обусловливает важность существующих финансовых и административных условий. И нет сомнений, что некоторые особенности внутренней политики лишь добавляют фракционных разногласий и объявлены нарушающими общечеловеческие нормы этики и морали. Банальные, но неопровержимые выводы, а также независимые государства формируют глобальную экономическую сеть и при этом — подвергнуты целой серии независимых исследований.
  </div>
</div>
Блок сворачивается только при повторном клике на кнопку. В большинстве случаев это неудобно. Можно написать отдельный Javascript для данной задачи, но когда у тебя уже подгружаются библиотеки jQuery и Bootstrap, то их и будем использовать.
Итак, добавляем небольшой код, который будет закрывать наше выпадающее содержимое, при клике в любом месте страницы, кроме самого выпадающего блока и его элементов. Комментарии дают понять, что делается.
    $(document).mouseup( function(e){  // событие клика по веб-документу
		var div = $( "#collapseExample.show" );  // здесь указываем сворачиваемое содержимое
		if ( !div.is(e.target)  // если клик был не по нашему сворачиваемому содержимому
		    && div.has(e.target).length === 0 ) {  // и не по его дочерним элементам
			$('.show-element').addClass('collapsed');  // добавляем кнопке класс .collapsed
            $('.propertyInput.show').removeClass('show');  // удаляем у сворачиваемого содержимого класс .show
		}
	});

Плавающий блок с призывом добавить товар в Избранное (на Bootstrap)

В XSL шаблон карточки товара над иконкой Избранного добавляем код:

<div class="alert alert-primary d-flex align-items-center alert-dismissible fade show alert-info-modal" role="alert">
     <small>Понравился товар? Добавьте его в избранное</small>
     <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Закрыть"></button>
</div>

Блок будет показываться с небольшой задержкой. Для этого используем возможности CSS3

@keyframes showDiv {
  0%,
  94% {
    opacity: 0;
  }
  95% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

Для кода использованы стили alert фреймворка Bootstrap 5

Закрывается блок нажатием на крестик.

Стили CSS

.alert-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.alert-info-modal {
  background-color: #ff8100;
  border: 0;
  color: #fff;
  position: absolute;
  bottom: 95%;
  left: 50%;
  min-width: 280px;
  padding: 10px 15px;
  animation: showDiv 3s forwards;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.alert-info-modal:before {
  border-width: 0.4rem 0.4rem 0;
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-top-color: #ff8100;
  top: 100%;
  left: 0px;
  transform: translate(50px,0px);
}
.alert-info-modal:after {
  margin-top: -1px;
  transform: rotate(45deg);
}
@keyframes showDiv {
  0%,
  94% {
    opacity: 0;
  }
  95% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

РАЗНОЕ

Вызов модального окна
  <script>   
              let modalSuccess = new bootstrap.Modal(document.getElementById('modalSuccess'));
              modalSuccess.show();
  </script>