By first click select div and unselect others, by second click on the same div unselect it

Question

I would like to have the following scenario:

only one div can be selected at the time (DONE)
by click on the div it should be selected and other divs should stay unselected (DONE)
by click on the already selected div, that div should be unselected and other divs will stay also unselected(TO DO)

I'm having problem to implement the last feature where by click on the already selected div to unselect it and other already working features should work as before. Could someone help me to make it work ?

var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function() {

    var selectedEl = document.querySelector(".selected");
    if (selectedEl) {
      selectedEl.classList.remove("selected");
    }
    this.classList.add("selected");

  }, false);
}

.optionsecoptions {
  width: 400px;
  padding-left: 10px;
  height: 40px;
  background: #bbb8b8;
  float: left;
  font-size: 20px;
  cursor: pointer;
}

.optionsecoptions:hover,
.optionsecoptions:active {
  background-color: #226fa3;
  transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
  color: #ffffff;
}

.selected {
  background-color: #226fa3;
  transition: background-color 0.4s ease-in, border-color 0.4s ease-in;
  color: #ffffff;
}


  
    Computers
  
  
    Electronics
  
  
    Mechanical
  
  
    Electrical

JSFiddle

user_1913729 · Answer

You can do it like this:

// If there was a selected element which is not this
if (selectedEl && selectedEl !== this) {
  selectedEl.classList.remove("selected");
}
// Toggle this
this.classList.toggle("selected");

As noted in the comments, your styles are a little misleading. You may want to have different styles on :hover and .selected. The demo below also changes that.

Demo:

var x = document.getElementsByClassName('optionsecoptions')
for (var i = 0; i < x.length; i++) {
  x[i].addEventListener("click", function() {

    var selectedEl = document.querySelector(".selected");
    // If there was a selected element which is not this
    if (selectedEl && selectedEl !== this) {
      selectedEl.classList.remove("selected");
    }
    // Toggle this
    this.classList.toggle("selected");

  }, false);
}

.optionsecoptions {
  width: 400px;
  padding-left: 10px;
  line-height: 40px;
  background: #eceded;
  font-size: 16px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.1s ease-in;
}

.optionsecoptions:hover { background-color: #bfe5ff; }
.optionsecoptions:active { background-color: #2d546f; color: #ffffff; }
.selected { background-color: #226fa3; color: #ffffff; }
.selected:hover { background-color: #4d99cc; }


  Computers


  Electronics


  Mechanical


  Electrical

By first click select div and unselect others, by second click on the same div unselect it

1 Answers