Show/Hide onclick

by Manuel Rojas

HTML

<span class="contenedor">
    <span class="nombreApp">
      click me,
    </span>
    <span class="cajita">
      door #1
    </span>
  </span>
  <span class="contenedor">
    <span class="nombreApp">
      click me,
    </span>
    <span class="cajita">
      door #1
    </span>
  </span>

CSS

.contenedor .cajita {
  display:none;
}

.nombreApp {
  cursor: pointer;
  display: inline-block;
}

.cajita {
  padding: 5px;
  margin-right: 5px;
  background: #EEE;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

JavaScript

$('.nombreApp').on('click', function() {
	$parent_box = $(this).closest('.contenedor');
	$parent_box.siblings().find('.cajita').hide();
	$parent_box.find('.cajita').toggle();
});