Envolva a lista de letras que você tem, em uma <div>
aplique um id à ela, (criei dois botões para exemplificar, um para mostrar outro para esconder):
<button onclick=mostraTodasLetras(true)>Mostrar Letras</button>
<button onclick=mostraTodasLetras(false)>Esconder Letras</button>
<div id=LetrasContainer>
<div>A</div>
<div>B</div>
<div>C</div>
...
</div>
E utilize esta função javascript mostrarTodasLetras()
:
function mostraTodasLetras(visiveis){
var aryDivs = document.getElementById('LetrasContainer').getElementsByTagName('div');
var len = aryDivs.length;
for (var i=0; i < len; i++){
if (visiveis)
aryDivs[i].style.display = 'block';
else
aryDivs[i].style.display = 'none';
}
}
Note que:
mostrarTodasLetras(false) //esconde todas as letras
mostrarTodasLetras(true) //mostra todas as letras
Aqui está um JSFiddle com tudo funcionando para você testar.
Eu recomendo essa solução acima em javascript pela performance, porém você tambem utilizar jquery que seria:
HTML(o mesmo, igual, nem precisa mudar):
<button onclick=mostraTodasLetras(true)>Mostrar Letras</button>
<button onclick=mostraTodasLetras(false)>Esconder Letras</button>
<div id=LetrasContainer>
<div>A</div>
<div>B</div>
<div>C</div>
...
</div>
Javascript:
function mostraTodasLetras(visiveis){
if (visiveis)
$('#LetrasContainer').show();
else
$('#LetrasContainer').hide();
}
Claro, é muito mais simples em jQuery, porém JavaScript nativo não necessita o uso de plugins externos. é sempre bom.