BOOTSTRAP / 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
		}
	});