Involve the list of letters you have, in a <div>
apply an id to it, (I created two buttons to illustrate, one to show another to hide):
<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>
And use this javascript function 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 that:
mostrarTodasLetras(false) //esconde todas as letras
mostrarTodasLetras(true) //mostra todas as letras
Here is a JSFiddle with everything working for you to test.
I recommend this above javascript solution for performance, however you also use jquery would be:
HTML (same, same, do not need to change):
<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();
}
Of course, it's much simpler in jQuery, but native JavaScript does not require the use of external plugins. It's always good.