<div class="row mt-4">

  <div class="border-right" id="apartment_0">
    <div class="row border-bottom align-items-center mx-0">
      <div class="col-2 p-2 m-2" id="floor_0">ЭТАЖ</div>
      <div class="col p-2 m-2" onclick="collapseTable(0)" class="collapsible" id="porch_0">Подъезд 0 <span id="ce_0">&times;</span></div>
    </div>
    <div class="row align-items-center mx-0" id="tb_0">
      <div class="col-2">
        99
      </div>
      <div class="col m-4">
        <span class="apSquare free text-center">q</span>
        <span class="apSquare freeReservation text-center">q</span>
        <span class="apSquare booked text-center">q</span>
        <span class="apSquare sold text-center">q</span>
      </div>
    </div>
  </div>
  <div class="col border-right" id="apartment_1">
    <div class="row border-bottom align-items-center mx-0">
      <div class="col-2 p-1" id="floor_1">ЭТАЖ</div>
      <div class="col p-1" onclick="collapseTable(1)" class="collapsible" id="porch_1">Подъезд 1 <span id="ce_1">&times;</span></div>
    </div>
    <div class="row align-items-center mx-0" id="tb_1">
      <div class="col-2">
        99
      </div>
      <div class="col m-4">
        <span class="apSquare free text-center">q</span>
        <span class="apSquare freeReservation text-center">q</span>
        <span class="apSquare booked text-center">q</span>
        <span class="apSquare sold text-center">q</span>
      </div>
    </div>
  </div>
  <div class="col border-right" id="apartment_$2">
    <div class="row border-bottom align-items-center mx-0">
      <div class="col-2 p-1" id="floor_2">ЭТАЖ</div>
      <div class="col p-1" onclick="collapseTable(2)" class="collapsible" id="porch_2">Подъезд 2 <span id="ce_2">&times;</span></div>
    </div>
    <div class="row align-items-center mx-0" id="tb_2">
      <div class="col-2">
        99
      </div>
      <div class="col m-4">
        <span class="apSquare free text-center">q</span>
        <span class="apSquare freeReservation text-center">q</span>
        <span class="apSquare booked text-center">q</span>
        <span class="apSquare sold text-center">q</span>
      </div>
    </div>
  </div>
</div>

body {
  overflow-x: hidden;
}

.apSquare {
  border-radius: 4px;
  width: 2.5rem;
  height: 2.5rem;
  float: left;
  cursor: pointer;
}

.free {
  background-color: #28a745;
}

.freeReservation {
  background-color: #ffc107;
}

.booked {
  background-color: #dc3545;
}

.sold {
  background-color: #6c757d;
}

.collapsible {
  cursor: pointer;
}

function collapseTable(thID) {
  let $collapseText = $("#ce_" + thID).text();
  if ($collapseText == "×") {
    $("#tb_" + thID).hide("slow");
    $("#ce_" + thID).text("+");
    $("#apartment_" + thID).animate({
      width: "12rem"
    });
  } else if ($collapseText == "+") {
    $("#tb_" + thID).show("slow");
    $("#ce_" + thID).text("×");
  }
}