Toggling Multiple Divs & Deactivating On Click

Question

Before writing this question I have looked for solutions but so far have been unable to locate something suitable.

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.

All three div containers have a drop box which is activated on click.

I have all this working apart from the following points which have been a sticking point for me.

1. 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.

2. Be able to close the dropdown by clicking anywhere on the page. Have managed to close it when clicking on the cross.

3. 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.

I have tried a number of JavaScript deactivate scripts but none have worked for me.

The code is as follows:

CREATIVE PRODUCTION

CONTENT DISTRIBUTION

PAID MEDIA

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. 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.

HTML

<div class="cheader" style="padding-bottom: 0;">
<div class="service-container">

<div class="bgbox" onclick="dropdown()">

<div id="service-box">

<h3> CREATIVE PRODUCTION </h3>

</div>  
</div>


<div class="bgbox" style="border-left-width: 0; border-right-width: 0;" 
onclick="dropdown2()">
<div id="service-box2">

<h3> CONTENT DISTRIBUTION </h3>

</div>
</div>


<div class="bgbox" onclick="dropdown3()">
<div id="service-box3">

<h3> PAID MEDIA </h3>

</div>
</div>

</div>

<div id="serv-desc-box">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px; ">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><i class="fa fa-times" aria-hidden="true" onclick
="close_box()"></i>
</div>


<div id="serv-desc-box2">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">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><i class="fa fa-times" aria-hidden="true" onclick
="close_box2()"></i>
</div>

<div id="serv-desc-box3">
<p style="text-align: left; margin-top: 0; margin-bottom: -45px;">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><i class="fa fa-times" aria-hidden="true" onclick
="close_box3()"></i>
</div>


<div class="cheader">
<div class="scontainer" style="padding: 20px 0;">
<h3>Get in touch</h3>

[contact-form-7 id="65" title="Contact form 1"]
</div>
</div>
</div>

CSS

/* 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; }

JavaScript

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

Any help will be very much appreciated. Thanks

Answer 1

JSFiddle: https://jsfiddle.net/0smLcfsx/14/

Comments/Updates: Inline click handlers are bad, please try to avoid using them. (related: onclick="" vs event handler)

The functionality of your bgbox clicks were VERY similar. I've boiled them down into a generic function based on the IDs (I've additionally moved the IDs from the div inside of the bgbox to the bgbox itself, as that is the element with the click handler and can't see a reason the div would need the ID).

I've additionally removed the IDs from the popups (serv-desc-box1,2,3) and inserted those elements into the service box they are related to. This allows for some fun stuff in the click handler! Instead of going through the rigmarole of determining which bg-box got clicked and calling customized dropdown functions per popup, we should create a generic function that will handle itself. This way the bgbox can say "open the popup inside my container" instead of "run the custom function to open the popup"

To your points:

(1) This was caused by your click handlers: $('.cheader').on('click', function(e){ You have three of these defined (one for each click scenario). Whenever cheader is clicked, all three are run. I've consolidated this into one function which is hopefully easier to read.

(2) I've added an invisible background that pops up and has z-index priority when a dropdown is shown. Whenever this invisible background is clicked, it will close the dropdowns.

(3) Same as #2.

Javascript

//Show/Hide Services Description Onclick

$(".invisible-background").on("click", function(e){
    $(".serv-desc-box").hide();
    $(".invisible-background").hide();
})

$(".bgbox").on("click", function(e){
    var id = $(this).attr("id");
    $("#"+id+"-desc").show();
    $(".invisible-background").show();
})

$(".cheader .bgbox").on("click", function(e){
    var id = $(this).find("div").attr("id");
    toggle_states(id);
});

function toggle_states(id_selector){
    var item = $(id_selector);
    item.find(".service-title").toggleClass('shade-a');
    item.find(".service-title h3").toggleClass('service-title-W');
    item.find(".service-title").toggleClass('disable');
    $(".service-title:not(#id_selector)").toggleClass('disable');
}

HTML

<div class="cheader" style="padding-bottom: 0;">
    <div class="service-container">
      <div class="invisible-background"></div>
      <div id="service-box" class="bgbox">
          <div class="service-title">
              <h3> CREATIVE PRODUCTION</h3>
          </div>  
      </div>
      <div id="service-box-desc" class="serv-desc-box">
        <p style="text-align: left; margin-top: 0; margin-bottom: -45px; ">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><i class="fa fa-times" aria-hidden="true"></i>
      </div>

      <div id="service-box2" class="bgbox" style="border-left-width: 0; border-right-width: 0;">
          <div class="service-title">
              <h3> CONTENT DISTRIBUTION </h3>
          </div>
      </div>
      <div id="service-box2-desc" class="serv-desc-box">
          <p style="text-align: left; margin-top: 0; margin-bottom: -45px;">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><i class="fa fa-times" aria-hidden="true"></i>
      </div>

      <div id="service-box3" class="bgbox">
          <div class="service-title">
              <h3> PAID MEDIA </h3>
          </div>
      </div>
      <div id="service-box3-desc" class="serv-desc-box">
        <p style="text-align: left; margin-top: 0; margin-bottom: -45px;">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><i class="fa fa-times" aria-hidden="true"></i>
      </div>
      <div class="cheader">
          <div class="scontainer" style="padding: 20px 0;">
              <h3>Get in touch</h3>

              [contact-form-7 id="65" title="Contact form 1"]
          </div>
      </div>
  </div>

CSS:

/* 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 {width: 100%; max-width: 628px;
height: 474px; display: inline-block; position: relative; z-index: 2; }

.service-box 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{
opacity:0.8!important; -webkit-transition: opacity .25s ease!important; -
moz-transition: opacity .25s ease!important; }

.service-box: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{
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: 41%; max-
width: 750px; height: auto; padding: 5px; border-top-width: 0; color: #fff;}

.invisible-background {
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index:3;
  }
}