I have code below for an alphabetical index I am trying to create using HTML, CSS and JavaScript. Is it possible to make the letter panels close when another letter is clicked? Example: Click "A" and the A panel appears, but when you click "B" the B panel appears and the A panel stays visible. Is there anyway to closed the "A" panel when a different letter is clicked? Anything helps, cheers.
function myFunctionA() {
document.getElementById("panelA").style.display = "block";
}
function myFunctionB() {
document.getElementById("panelB").style.display = "block";
}
function myFunctionC() {
document.getElementById("panelC").style.display = "block";
}.alphabet {
list-style-type: none;
margin:0px auto 0;
padding:0;
cursor: pointer;
width:100%;
text-align:center;
}
.alphabet li {
float:left;
margin:0;
padding:0;
border-right:1px solid darkgrey;
font-size: 13px;
font-family:Verdana;
-moz-box-sizing:border-box;
color:black;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:3.84%;
}
.alphabet li:last-child {
border-right: none;
}
.alphabet li:hover {
color:#005bab;
background-color: lightgrey;
}
#panelA, #panelB, #panelC {
display: none;
}
#panelA, #panelB, #panelC, .flip {
font-size: 16px;
text-align: center;
background-color:#fcfcfc;
border-style:solid;
border-width:1px;
border-color:grey;
color: black;
margin: auto;
}<div>
<ul class="alphabet">
<li class="flip" onclick="myFunctionA()">A</li>
<li class="flip" onclick="myFunctionB()">B</li>
<li class="flip" onclick="myFunctionC()">C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
<br/>
<div id="panelA">
<p>A</p>
</div>
<div id="panelB">
<p>B</p>
</div>
<div id="panelC">
<p>C</p>
</div>
