title: Toggling Multiple Divs & Deactivating On Click
body: <p>Before writing this question I have looked for solutions but so far have been unable to locate something suitable.</p>
  
  <p>I have three div containers that are inline and have two states, a hover and an active. On hover darkens (opacity 0.5) on click darkens more (0.8). I have then created a custom state so that the activate darker state stays on when the dropdown div box is activated on click.</p>
  
  <p>All three div containers have a drop box which is activated on click.</p>
  
  <p>I have all this working apart from the following points which have been a sticking point for me.</p>
  
  <ol>
  <li><p>On clicking on any one of the div containers all are darkened (opacity 0.8) indicating has been activated, but would like just the selected one to be darkened not all of them at once.</p></li>
  <li><p>Be able to close the dropdown by clicking anywhere on the page. Have managed to close it when clicking on the cross.</p></li>
  <li><p>When one of the containers has been selected and the dropdown is visible none of the containers should be clickable. I have managed to disable the pointer action but not the actual click, as don't want a situation where you can have multiple dropdowns at the same time. Also even though the pointer action has been disabled can still click, which then activates or deactivates the custom darkened active state.</p></li>
  </ol>
  
  <p>I have tried a number of JavaScript deactivate scripts but none have worked for me.</p>
  
  <p>The code is as follows:</p>
  
  <p></p>
  
  
  
  
  
  
  
  <h3> CREATIVE PRODUCTION </h3>
  
    
  
  
  
  
  
  
  <h3> CONTENT DISTRIBUTION </h3>
  
  
  
  
  
  
  
  
  <h3> PAID MEDIA </h3>
  
  
  
  
  
  
  
  Clients engage us to achieve measurable results; our team of specialists ensure that happens. We aim to be very approachable on the social channels. So if you want to know our secrets and can't learn them in our blogs, you know where to find us.</p>
  
  
  
  Clients engage us to achieve measurable results; our team of specialists ensure that happens. We aim to be very approachable on the social channels. So if you want to know our secrets and can't learn them in our blogs, you know where to find us.</p>
  
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="cheader" style="padding-bottom: 0;"&gt;
  &lt;div class="service-container"&gt;
  
  &lt;div class="bgbox" onclick="dropdown()"&gt;
  
  &lt;div id="service-box"&gt;
  
  &lt;h3&gt; CREATIVE PRODUCTION &lt;/h3&gt;
  
  &lt;/div&gt;  
  &lt;/div&gt;
  
  
  &lt;div class="bgbox" style="border-left-width: 0; border-right-width: 0;" 
  onclick="dropdown2()"&gt;
  &lt;div id="service-box2"&gt;
  
  &lt;h3&gt; CONTENT DISTRIBUTION &lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div class="bgbox" onclick="dropdown3()"&gt;
  &lt;div id="service-box3"&gt;
  
  &lt;h3&gt; PAID MEDIA &lt;/h3&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="serv-desc-box"&gt;
  &lt;p style="text-align: left; margin-top: 0; margin-bottom: -45px; "&gt;Clients
  engage us to achieve measurable results; our team of specialists ensure that
  happens. We aim to be very approachable on the social channels. So if you
  want to know our secrets and can't learn them in our blogs, you know where
  to find us.&lt;/p&gt;&lt;i class="fa fa-times" aria-hidden="true" onclick
  ="close_box()"&gt;&lt;/i&gt;
  &lt;/div&gt;
  
  
  &lt;div id="serv-desc-box2"&gt;
  &lt;p style="text-align: left; margin-top: 0; margin-bottom: -45px;"&gt;Clients
  engage us to achieve measurable results; our team of specialists ensure that
  happens. We aim to be very approachable on the social channels. So if you
  want to know our secrets and can't learn them in our blogs, you know where
  to find us.&lt;/p&gt;&lt;i class="fa fa-times" aria-hidden="true" onclick
  ="close_box2()"&gt;&lt;/i&gt;
  &lt;/div&gt;
  
  &lt;div id="serv-desc-box3"&gt;
  &lt;p style="text-align: left; margin-top: 0; margin-bottom: -45px;"&gt;Clients
  engage us to achieve measurable results; our team of specialists ensure that
  happens. We aim to be very approachable on the social channels. So if you
  want to know our secrets and can't learn them in our blogs, you know where
  to find us.&lt;/p&gt;&lt;i class="fa fa-times" aria-hidden="true" onclick
  ="close_box3()"&gt;&lt;/i&gt;
  &lt;/div&gt;
  
  
  &lt;div class="cheader"&gt;
  &lt;div class="scontainer" style="padding: 20px 0;"&gt;
  &lt;h3&gt;Get in touch&lt;/h3&gt;
  
  [contact-form-7 id="65" title="Contact form 1"]
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>/* Services */
  
  .bgbox { width: 33%; max-width: 628px; height: 474px; display: inline-block;
  position: relative; margin-left: -3px; margin-right: -3px; z-index: 2;
  border: 5px solid #fff; }
  
  #service-box, #service-box2, #service-box3 {width: 100%; max-width: 628px;
  height: 474px; display: inline-block; position: relative; z-index: 2; }
  
  #service-box h3, #service-box2 h3, #service-box3 h3  { position: relative;
  top: 44%; word-wrap: break-word; z-index: 4; }
  
  .shade-a { background:rgba(0,0,0,.5)!important; opacity:0.8; -webkit-
  transition: opacity .25s ease; -moz-transition: opacity .25s ease;}
  
  #service-box:active, #service-box2:active, #service-box3:active {
  opacity:0.8!important; -webkit-transition: opacity .25s ease!important; -
  moz-transition: opacity .25s ease!important; }
  
  #service-box:hover, #service-box2:hover, #service-box3:hover {
  background:rgba(0,0,0,.5); opacity:0.4; -webkit-transition: opacity .25s
  ease; -moz-transition: opacity .25s ease; cursor: pointer; }
  
  #service-box:hover h3, #service-box2:hover h3, #service-box3:hover h3  {
  opacity:1.0; -webkit-transition: opacity .25s ease; -moz-transition: opacity
  .25s ease; cursor: pointer; color: #fff; }
  
  .service-title-W {color: #fff!important; }
  
  .disable { pointer-events: none;  }
  
  #serv-desc-box { border: 5px solid #fff; background: rgba(0,0,0,.5);
  opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
  .25s ease; position: relative; display: none; z-index: 2; width: 100%; max-
  width: 750px; height: auto; padding: 5px; border-top-width: 0; color: #fff;}
  
  #serv-desc-box2 { border: 5px solid #fff; background: rgba(0,0,0,.5);
  opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
  .25s ease; position: relative; display: none; left: 33.2%; top: 0; z-index:
  2; width: 100%; max-width: 750px; height: auto; padding: 5px; border-top-
  width: 0; color: #fff; }
  
  #serv-desc-box3 { border: 5px solid #fff; background: rgba(0,0,0,.5);
  opacity:0.8; -webkit-transition: opacity .25s ease; -moz-transition: opacity
  .25s ease; position: relative; display: inline-block; display: none; left:
  59.6%; top: 0; z-index: 2; width: 100%; max-width: 750px; height: auto;
  padding: 5px; border-top-width: 0; color: #fff; }
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>//Show/Hide Services Description Onclick
  
  function dropdown() {
  document.getElementById('serv-desc-box').style.display = "block";
  
  }
  
  function close_box() {
  document.getElementById('serv-desc-box').style.display = "none";
  
  }
  
  
  function dropdown2() {
  document.getElementById('serv-desc-box2').style.display = "block";
  
  }
  
  function close_box2() {
  document.getElementById('serv-desc-box2').style.display = "none";
  
  }
  
  function dropdown3() {
  document.getElementById('serv-desc-box3').style.display = "block";
  
  }
  
  function close_box3() {
  document.getElementById('serv-desc-box3').style.display = "none";
  
  }
  
  
  //Toggle active state, service title &amp; disable pointer events
  
  $('.cheader').on('click', function(e){
  if($(e.target).attr('id') != 'service-box'){
       $('#service-box').toggleClass('shade-a');
       $('#service-box h3').toggleClass('service-title-W');
       $('#service-box').toggleClass('disable');
       $('#service-box2').toggleClass('disable');
       $('#service-box3').toggleClass('disable');
  
  }else{
      $('#service-box').removeClass('shade-a');
      $('#service-box h3').removeClass('service-title-W');
      $('#service-box').removeClass('disable');
      $('#service-box2').removeClass('disable');
      $('#service-box3').removeClass('disable');
      }
  });
  
  $('.cheader').on('click', function(e){
  if($(e.target).attr('id') != 'service-box2'){
       $('#service-box2').toggleClass('shade-a');
       $('#service-box2 h3').toggleClass('service-title-W');
       $('#service-box').toggleClass('disable');
       $('#service-box2').toggleClass('disable');
       $('#service-box3').toggleClass('disable');
  
  }else{
      $('#service-box').removeClass('shade-a');
      $('#service-box2').removeClass('shade-a');
      $('#service-box2 h3').removeClass('service-title-W');
      $('#service-box').removeClass('disable');
      $('#service-box2').removeClass('disable');
      $('#service-box3').removeClass('disable');
     }
  });
  
  $('.cheader').on('click', function(e){
  if($(e.target).attr('id') != 'service-box3'){
       $('#service-box3').toggleClass('shade-a');
       $('#service-box3 h3').toggleClass('service-title-W');
       $('#service-box').toggleClass('disable');
       $('#service-box2').toggleClass('disable');
       $('#service-box3').toggleClass('disable');
  
  
  }else{
      $('#service-box3').removeClass('shade-a');
      $('#service-box3 h3').removeClass('service-title-W');
      $('#service-box').removeClass('disable');
      $('#service-box2').removeClass('disable');
      $('#service-box3').removeClass('disable');
     }
  });
  </code></pre>
  
  <p>Any help will be very much appreciated. Thanks</p>