Highlighting

by Ishank Dubey

HTML

<div class="col-md-3 section_container ">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>


<div class="col-md-3 section_container">
  <div id="content" class="col-md-10 leftone ">Make a complaint</div>
  <div class="rightone  col-md-2">
    <img id="arrow" class="arrow-image">
  </div>
</div>

CSS

.highLight {
  background-color: red;
}

JavaScript

var elements = document.getElementsByClassName("section_container"),
  anIndex = 0;

if (elements && elements.length) {
  for (anIndex; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].addEventListener("click", cHandler);
  }
}

function cHandler(event) {
  for (anIndex = 0; anIndex < elements.length; anIndex++) {
    if (elements.hasOwnProperty(anIndex))
      elements[anIndex].classList.remove("highLight");
  }
  this.classList.add("highLight");
}