9

Não sei nada de Javascript. Portanto mesmo sendo algo "simples" pra alguns pra mim é um bicho de sete cabeça. É o seguinte:

No código a seguir tem um script que eu vou usar que esconde e mostra a div ao clicar no button, só que nesse script ai mesmo que eu clique mil vezes no button o valor dentro dele não muda!

function Mudarestado(el) {
    var display = document.getElementById(el).style.display;

    if(display == "none")
        document.getElementById(el).style.display = 'block';
    else
        document.getElementById(el).style.display = 'none';
}
<div id="minhaDiv">Conteudo</div>

<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>

Eis então o que eu queria fazer! Gostaria que quando a div estivesse escondida o texto mostrado no button fosse "mostrar", e quando a div estivesse a mostra eu gostaria que mostrasse "esconder".

Ainda melhorando o script, gostaria que tivesse um efeito fade.

Se possível gostaria que isso fosse feito em javascript puro, porque não uso Jquery no meu projeto, então acho inconveniente colocar um arquivo de 100kb só por causa de algo relativamente "simples"

1
  • 1
    Você fez duas perguntas em uma... respondi a pergunta principal, mas acrescentar um efeito fade em JS puro está suficientemente dissociado a ponto de merecer uma pergunta separada. Nesse link há uma técnica interessante, porém limitada (ele não coloca display:none no final). Buscando pelo assunto, há outras possibilidades, mas de todo modo é uma tarefa de razoável complexidade... (primeiro se anima opacity e só no final esconde - não dá pra animar "visibilidade")
    – mgibsonbr
    Commented 5/01/2015 às 6:56

3 Respostas 3

7

Tudo o que você precisa fazer é selecionar o botão (dê-lhe um id pra isso ficar mais fácil) e mudar o seu valor (innerHTML) durante o código do onclick:

function Mudarestado(el) {
    var display = document.getElementById(el).style.display;
    var botao = document.getElementById("meuBotao");

    if(display == "none") {
        document.getElementById(el).style.display = 'block';
        botao.innerHTML = "Esconder";
    }
    else {
        document.getElementById(el).style.display = 'none';
        botao.innerHTML = "Mostrar";
    }
}
<div id="minhaDiv">Conteudo</div>

<button id="meuBotao" type="button" onclick="Mudarestado('minhaDiv')">Esconder</button>

3
  • Boa tarde, eu gostaria de saber como mudar o valor do onClick ao clicar no botão. Commented 17/01/2015 às 16:14
  • 1
    @IWannaKnow Isso resolve? botao.onclick = function(e) { ... };
    – mgibsonbr
    Commented 17/01/2015 às 16:40
  • Eu fiz um teste agora com o setAttribute e deu certo. Obrigado pela indicação. Commented 17/01/2015 às 16:49
3

Basta utilizar innerHTML para ler/definir o texto do seu <button>.

$div = document.querySelector('.minha-div');
$button = document.querySelector('.handle-div');

$button.onclick = function(){
    this.innerHTML = this.innerHTML == 'Esconder' ? 'Mostrar' : 'Esconder';
    /*
      ou...
      var inner = this.innerHTML;
      if(inner == 'Esconder')
          inner = 'Mostrar';
      else
          inner = 'Esconder';
      this.innerHTML = inner;
    */
    mudarEstado();
}


function mudarEstado() {
    var display = $div.style.display;
    if(display == "none")
        $div.style.display = 'block';
    else
        $div.style.display = 'none';
}
<div class="minha-div">Conteudo</div>
<button class='handle-div' type="button">Esconder</button>

1

Você poderia fazer da seguinte forma usando operador tenário e passando a referência do botão por parâmetro com this para poder alterar o texto do mesmo.

function Mudarestado(el, btn) {
    
    var ele = document.getElementById(el);
    var display = ele.style.display;
    
    ele.style.display = display == 'none' ? 'block' : 'none';
    btn.innerHTML = display == 'none' ? 'Esconder' : 'Mostrar';

}
<div id="minhaDiv">Conteudo</div>

<button type="button" onclick="Mudarestado('minhaDiv', this)">Esconder</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .