I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below are a few images illustrating my desired outcome.
This example showcases what I am aiming for, however, I would like to accomplish it without utilizing jQuery. https://codepen.io/matthewbeta/pen/zioHr
https://i.sstatic.net/tYVqk.jpg https://i.sstatic.net/Jhsvv.jpg https://i.sstatic.net/g4Nqd.jpg
It is partially functional already, yet I am struggling to display Row-B only upon its click. Currently, clicking on Row-A reveals both rows simultaneously. Conversely, selecting Row-B causes Row-A to be the sole visible row.
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>