I have a coding challenge where I need to implement two panels. The lower panel consists of three buttons and upon clicking each button, different data should load in the upper panel.
For example, when button 1 is clicked, divs 1.1, 1.2, and 1.3 should slide in. Similarly, when button two is pressed, divs 2.1, 2.2, 2.3, and 2.4 should be displayed.
If you want to see the setup code, check out this DEMO.
.panel {
width: 300px;
height: 100px;
border: 1px solid black;
}
.panel > .panelTop {
width: 100%;
height: 49px;
border-bottom: 1px dashed black;
}
.panel > .panelBottom {
width: 100%;
height: 50px;
}
.panel > .panelTop > div {
width: 24px;
height: 24px;
float: right;
margin: 13px 9px 0 0;
border: 1px dashed black;
}
.panel > .panelBottom > div {
width: 32px;
height: 32px;
float: right;
margin: 9px 9px 0 0;
border: 1px solid black;
text-align: center;
font-size: 22px;
}<div class="panel">
<div class="panelTop">
Dependant Buttons:
<!-- Side1 -->
<div>1.1</div>
<div>1.2</div>
<div>1.3</div>
<!-- Side2
<div>2.1</div>
<div>2.2</div>
<div>2.3</div> -->
<!-- Side3
<div>3.1</div>
<div>3.2</div>
<div>3.3</div> -->
</div>
<div class="panelBottom">
Main Buttons:
<div class="btn1">1</div>
<div class="btn2">2</div>
<div class="btn3">3</div>
</div>
</div>Each div will have its unique classes, and I'm considering using arrays in jQuery or setting visibility to hidden in CSS to achieve this functionality. Do you have any other ideas?