Ocultar divs

by Raúl Rojas

HTML

<div class="primero">
  <div class="header">
    <div class="btn" id="uno">UNO</div>
    <div class="btn" id="dos">DOS</div>
    <div class="btn" id="tres">TRES</div>
  </div>

  <div class="body">
    <div class="content" id="c-uno">
      <p>
        111111111111111
      </p>
    </div>
    <div class="content" id="c-dos">
      <p>
        222222222222222
      </p>
    </div>
    <div class="content" id="c-tres">
      <p>
        333333333333
      </p>
    </div>

  </div>
</div>

<div class="segundo">
  <div class="header">
    <div class="btn" id="uno">UNO</div>
    <div class="btn" id="dos">DOS</div>
    <div class="btn" id="tres">TRES</div>
  </div>

  <div class="body">
    <div class="content" id="c-uno">
      <p>
        111111111111111
      </p>
    </div>
    <div class="content" id="c-dos">
      <p>
        222222222222222
      </p>
    </div>
    <div class="content" id="c-tres">
      <p>
        333333333333
      </p>
    </div>
  </div>
</div>

CSS

.header {
  border: 1px solid #ccc;
  width: 300px;
  margin: 10px auto;
  text-align: center;
}

.body {
  border: 1px solid #ccc;
  width: 400px;
  margin: 10px auto;
  text-align: center;
}

.btn {
  display: inline-block;
  text-align: justify;
  width: 60px;
  cursor: pointer;
  color: green;
}

.primero {
  background: blue;
  padding: 5px;
}

.segundo {
  background: orange;
  padding: 5px;
  margin-top: 10px;
}

.content {
  width: 400px;
  text-align: center;
  padding: 20px 0;
  background: #dedede;
  border: 1px solid #ccc;
  margin: 20px auto;
  display: none;
}

JavaScript

$(document).ready(function () {
  $("#uno").click(function () {
    $('#c-uno').toggle("slow");
  });
  $("#dos").click(function () {
    $("#c-dos").toggle("slow");
  });
  $("#tres").click(function () {
    $('#c-tres').toggle("slow");
  });

  $(".segundo #uno").click(function () {
    $('.segundo #c-uno').toggle("slow");
  });
  $(".segundo #dos").click(function () {
    $(".segundo #c-dos").toggle("slow");
  });
  $(".segundo #tres").click(function () {
    $('.segundo #c-tres').toggle("slow");
  });
});