Function to expand list

Question

I created a "dictionary" from A to Z , where when I want to see what is in the letter A, I click on it. Tté ai beauty. So that I don’t have to click one by one to find some meaning, I would like to put a function to expand everything from A to Z. I used with the loop `for", but it’s not working, I already researched and I don’t find anything. Here’s the code:

function expandirTudo() {

    //Conta ao alfabeto de A a Z
    for (var ch = 'A';ch <= 'Z';ch++) {

        //Enquando tiver lista oculta (none), mostre a lista(block). 
        while(document.getElementById(ch).style.display == 'none'){ 
            document.getElementById(ch).style.display = 'block';                        
        }
        return ch;

    }

}

Answer 1

Put a class in all dictionary elements:

<div class="dic-item" id="A">...</div>
<div class="dic-item" id="B">...</div>
<div class="dic-item" id="C">...</div>
...
<div class="dic-item" id="Z">...</div>

As you are using jQuery, can do so:

$(".dic-item").show();

Answer 2

The problem is that you’re trying to make a loop iterating between letters and that’s impossible, it has to be numbers.

Example:

for (var idx='A'.charCodeAt(0), fim='Z'.charCodeAt(0); idx <= fim; ++idx) {
    var letra = String.fromCharCode(idx);
    document.getElementById(letra).style.display = 'block';
}

Explanation:

idx is the ANSII code of the letter 'A' (65) and end is the ANSII code of the letter 'Z' (98), iterated as long as it is less or equal to include the letter 'Z' in the loop.

Like idx this being added to 1 each iteration, inside the loop I take the character represented by the code in the table and return to a variable, which you can use in this case as ID of your element.

Answer 3

The problem is that the for does not iterate in the chars but only with number. To do what you want I believe it is easier to do so:

function expandirTudo() {
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

    for (var i = 0;i <= letters.length; i++) {
        if(letters[i] && document.getElementById(letters[i]) !== null) {
            document.getElementById(letters[i]).style.display = 'block';
        }
    }
}

With this you create an array of all letters and iterate through it.

Answer 4

Wrap 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’s a Jsfiddle with everything working for you to test.

I recommend this solution above in javascript for performance, but you also use jquery that would be:

HTML (same, same, no 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.