Flexbox expanding grid

by rdenver6

HTML

<div id="container">
  <div class="box">
    Box 1
    <div class="subLinks">
      <ul>
        <li>Upload</li>
        <li>Search</li>
        <li>Export</li>
      </ul>
    </div>
  </div>
  <div class="box">
    Box 2
    <div class="subLinks">
      <ul>
        <li>Upload</li>
        <li>Search</li>
        <li>Export</li>
      </ul>
    </div>
  </div>
</div>

CSS

#container {
  display: flex;
  flex-wrap: wrap;
}

#container .box {
  border: 1px solid black;
  height: 100px;
  margin: 10px;
  position: relative;
  width: 120px;
}
.subLinks {display:none;}
.expand {
  background-color:gray;
  border:1px solid red;  
  position: absolute;
  top: 0;
  background-color: white;
  width:260px;
  z-index:2;
}
.expand:nth-of-type(odd) {
  left:0;
}
.expand:nth-of-type(even) {
  right:0;
}
.box:nth-of-type(odd) {
background-color:cyan;
}
    
.box:nth-of-type(even) {
background-color:green;
}

JavaScript

$(".box").on("click", function() {
console.log('clicked box');
	$(this).find(".subLinks").toggle();
  $(this).find(".subLinks").addClass("expand");
});
$(".subLinks").on("click", function() {
$(this).removeClass("expand");
console.log('clicked');
	$(this).toggle();
});