Закрытие открытого блока при клике на другой
 

Доброго времени суток, суть проблемы состоит в том, чтобы при клике на #trigger2 открывался #box2, при клике на #trigger3 - #box2 закрывался и открывался #box3, аналогично с #box4, при клике вне блоков #box2,3,4 закрытие этих блоков, но тут возникает проблема, что собственно триггеры будут областью вне дива box и соотвественно не откроются.

Спасибо за внимание! С уважением, Coroner.

Демо

<div class="advanced">
            
              <a href='#' id='trigger2'> <article>
            <img src="img/discount.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
                  </article></a>
          <a href='#' id='trigger3'><article>
            <img src="img/box.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
              </article></a>
        
          <a href='#' id='trigger4'><article>
            <img src="img/cards.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
              </article></a>
     
 <div id='box2' style='display: none;'>   
   Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 
             <div id='box3' style='display: none;'>   
     Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 
             <div id='box4' style='display: none;'>   
     Кофеман 24 - это крупнейшее в России производство снеков и кондитерских изделий, а также мощное логистическое звено: у холдинга свои склады, распределительные центры и свой автопарк. Именно такой подход к организации бизнес-процессов позволяет KDV держать демократичные цены на свою продукцию. А покупая ее напрямую у производителя – в интернет-магазине KDV, вы приобретаете товар по привлекательным ценам.
     </div> 

</div>

<script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger2").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box2").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box2").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 
  
    
    
         <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger3").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box3").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box3").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script> 

    
    
         <script type='text/javascript'> 
    $(document).ready(function() { 
      $("A#trigger4").toggle(function() { 
        // Отображаем скрытый блок 
        $("DIV#box4").fadeIn(); // fadeIn - плавное появление
        return false; // не производить переход по ссылке
      },  
      function() { 
        // Скрываем блок 
        $("DIV#box4").fadeOut(); // fadeOut - плавное исчезновение 
        return false; // не производить переход по ссылке
      }); // end of toggle() 
    }); // end of ready() 
  </script>

CORONER,
на форуме есть все варианты открыть по клику, их более 400 ...
https://javascript.ru/forum/css-html...tml#post494297
https://javascript.ru/forum/dom-wind...tml#post494186
искать открывашка

Как можно реализовать закрытие дива dropdown при клике вне его области? Пытаюсь обычными средствами это реализовать, но, как показывает практика - все выходит боком.
Пробовал сделать так, но ничего не выходит. И вещал на .wrapper-content, .dropdown - результат нулевый.

$(document).mouseup(function (e) {
    var container = $(".dropdown");
    if (container.has(e.target).length === 0){
        container.hide();
    }
});

Но

<div class="row">        
<div class="col-sm-3 col-md-2">
<div id="dd-make" class="wrapper-dropdown" tabindex="1">
            <span>
     <article> <img src="img/box.png">
                <span>
                бесплатная доставка
                </span>
                <p>от 1500 рублей</p>
              </article>
    </span>
            <ul class="dropdown">
            1
            </ul>
        </div>
  </div>
<div class="col-sm-3 col-md-2">
        <div id="dd-model" class="wrapper-dropdown " tabindex="1">
            <span>
            <article> <img src="img/discount.png">
                <span>
                акции на товары недели
                </span>
                <p>скидки до -50%</p>
              </article>
            </span>
            <ul class="dropdown">
             2
            </ul>
        </div>
  </div>
  <div class="col-sm-3 col-md-2">
        <div id="dd-year" style="margin-left:1%;" class="wrapper-dropdown " tabindex="1">
            <span>

            <article>
            <img src="img/cards.png">
                <span>
                условия оплаты
                </span>
                <p>способы оплаты</p>
              </article>
            </span>
            <ul class="dropdown">
             3
            </ul>
        </div>
  </div>

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}

DropDown.prototype = {
  initEvents : function() {
      var obj = this;
        obj.dd.on('click', function(event){
      $('.wrapper-dropdown').not(this).removeClass('active');
        $(this).toggleClass('active');
            return false;
        });
        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {
  var ddMake = new DropDown( $('#dd-make') );
  var ddModel = new DropDown( $('#dd-model'));
  var ddYear = new DropDown( $('#dd-year') );
  var ddSeries = new DropDown( $('#dd-series'));
  var ddEngine = new DropDown( $('#dd-engine') );
  var ddVariant = new DropDown( $('#dd-variant'));

});

пример :)