I am trying to create a drop-down navigation bar with 2 rows. By default, only 1 row is shown. If you click this row, both rows should show. Then, if you click one of the 2 rows, only that row should show. And so on. Here is few images which should demonstrate what I wish to achieve.
Here is an example of what I am trying to achieve, but I wish to do it without jQuery. https://codepen.io/matthewbeta/pen/zioHr
It partially already works, but I cannot figure out how to show Row-B only when it's clicked. Now what happens is, you click Row-A, both rows are shown. If you click Row-B, Row-A shows only.
var select = document.getElementById("select");
var rowB = document.getElementById("rowB");
rowB.style.display = "none";
select.addEventListener("click", function(){
if (rowB.style.display == "none") {
rowB.style.display = "flex";
}
else {rowB.style.display = "none"};
});body {
margin: 0px;
}
#content {
width: 300px;
height: 300px;
background: #000;
display: grid;
grid-template-rows: 70px 160px 70px;
}
#select {
width: 270px;
height: 90px;
margin: 0 auto;
color: #fff;
margin-top: 10px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
z-index: 2;
}
#rowA,
#rowB {
width: 270px;
height: 40px;
background: #000;
border: #2e2e2e 1px solid;
display: flex;
align-items: center;
z-index: 2;
}<body><div id="content"><div id="select"><div id="rowA">Row-A</div><div id="rowB">Row-B</div></div></div></body>
