jQuery: click and double click events

Simulate change section on click menu, and hide section on double click.

by Porfirio Chavez

HTML

<div id="container">
  <div id="content">
    <p>
      Press Item to select,
      Do double click to hide
    </p>
  </div>
  <div id="menu">
      <div>Item A</div>
      <div>Item B</div>
      <div>Item C</div>
      <div>Item D</div>
  </div>
</div>

CSS

#container {
    height: 300px;
    width: 400px;
    background: #99CCFF;
    display: none;
}
#content {
  float: left;
  width: 200px;
}
#menu {
    width: 120px;
    height: 300px;
    background-color: #399;
    float: right;
    display: none;
}
#menu div {
    height: calc(300px / 4);
    text-align: right;
    font-family: Verdana, Geneva, sans-serif;
    color: #FFF;
    cursor: pointer;
    padding-right: 10px;
}
#menu div:hover {
  border-right: 10px solid #ffef96;
}

#menu div:nth-child(1){
  background-color: #6b5b95;
}

#menu div:nth-child(2){
  background-color: #feb236;
}

#menu div:nth-child(3){
  background-color: #d64161;
}

#menu div:nth-child(4){
  background-color: #ff7b25;
}

JavaScript

function initialize(){
    var x = $("#container");
    x.show(300, showMenu);
}

function showMenu(){
    var x = $("#menu");
    x.show(300, addEventListeners);
}

function addEventListeners(){
    var menuContainer = $("#menu");
    var menuItems = menuContainer.find('div');
    menuItems.on("click", showItem);
    menuItems.on("dblclick", hideItem);
}

function showItem(e){
  var bgColor = $(e.currentTarget).css('backgroundColor');
  $("#container").css("background-color", bgColor);
}

function hideItem(){
    $("#container").css("background-color", "#99CCFF");
}

$(document).ready(initialize);