Ir para conteúdo
Fórum CódigoFonte.net
  • Anúncios

    • codigofonte

      Novo Fórum

      Pessoal, Atualizamos nossa versão do fórum para a mais recente da Invision Power. Como tínhamos uma versão muito antiga, talvez algumas áreas possam funcionar de forma errada ou com problemas, gostaria de pedir-lhes a compreensão, pois iremos resolvendo aos poucos. Até mais!
Adriano Campos

(Resolvido) botão mostrar / esconder

Recommended Posts

[RESOLVIO] ola coloquei um botão mostrar/econder, para o conteudo ficar escondido, e qt o usuario clicar em mostrar aparece o conteudo

funcionou qt eu coloquei o 1º item,

ja no 2º da dando problema, qt clico em mostar ele mostra o conteudo do 1º item

o site é esse: http://www.rotasaboresesaberes.tur.br/receitas.html

oque pod ser?!?!?

o code q eu usei foi esse:

<!-- nosso botão que ativa a função ativa() //--> 
<input type="button" id="botao" value="mostra" onClick="ativa()"> 

<!-- o div contendo nosso conteúdo a ser mostrado //--> 
<div id='div' style='display:none'> 
conteúdo 
</div> 

<script> 
function ativa(){ 
var div = document.getElementById('div') 
/* se conteúdo está escondido, mostra e troca o valor do botão para: esconde */ 
if (div.style.display == 'none') { 
document.getElementById("botao").value='esconde' 
div.style.display = 'block' 
} else { 
/* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostra */ 
div.style.display = 'none' 
document.getElementById("botao").value='mostra' 
} 
} 
</script>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja se esse ajuda:

<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten[i].onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<div id="central">
    <input type="button" value="Primeira" id="receita1">
    <input type="button" value="Segunda" id="receita2">
    <input type="button" value="Terceira" id="receita3">
    <input type="button" value="Quarta" id="receita4">
    <input type="button" value="Quinta" id="receita5">
    <div id="1" class="escondida">Conteudo 1</div>
    <div id="2" class="escondida">Conteudo 2</div>
    <div id="3" class="escondida">Conteudo 3</div>
    <div id="4" class="escondida">Conteudo 4</div>
    <div id="5" class="escondida">Conteudo 5</div>
</div>

Obs: Só não altera o nome do id="receitaN" onde N é o número do div com o id=N correspondente aquele botão.

Compartilhar este post


Link para o post
Compartilhar em outros sites

RESOLVIDO achei esse code na net:

   <div class="pre-spoiler">

    <input id="xs" value="Leia Mais" style="margin-left: 50px; padding: 0px; width: 80px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ocultar'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Leia Mais';}" type="button"> </div>

    <div>

    <div class="spoiler" style="display: none;">

    Aqui você coloca o texto que quer esconder e que só vai aparecer quando clicarem no botão.

    </div>

    </div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

É exatamente isso que estou procurando pra colocar em minha página, mas há um porém, eu vou precisar repetir esse código muitas vezes, então, como separá-lo a cada repetição?? Exemplo:

<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten.onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<div id="central">
    <input type="button" value="Primeira" id="receita1">
    <input type="button" value="Segunda" id="receita2">
    <input type="button" value="Terceira" id="receita3">
    <input type="button" value="Quarta" id="receita4">
    <input type="button" value="Quinta" id="receita5">
    <div id="1" class="escondida">Conteudo 1</div>
    <div id="2" class="escondida">Conteudo 2</div>
    <div id="3" class="escondida">Conteudo 3</div>
    <div id="4" class="escondida">Conteudo 4</div>
    <div id="5" class="escondida">Conteudo 5</div>
</div>
<br>
<br>
<br>
<style type="text/css">
.escondida {
    display:none;
}
</style>

<script type="text/javascript">
function abrir() {
    var main = document.getElementById("central");
    var iten = main.getElementsByTagName("input");
    if (iten) {
        for (var i=0;i<iten.length;i++) {
            iten.onclick = function() {
                var el = document.getElementById(this.id.substr(7,7));
                if (el.style.display == "block")
                    el.style.display = "none";
                else
                    el.style.display = "block";
            }
        }
    }
}
window.onload=abrir;
</script>

<div id="central">
    <input type="button" value="Primeira" id="receita1">
    <input type="button" value="Segunda" id="receita2">
    <input type="button" value="Terceira" id="receita3">
    <input type="button" value="Quarta" id="receita4">
    <input type="button" value="Quinta" id="receita5">
    <div id="1" class="escondida">Conteudo 1</div>
    <div id="2" class="escondida">Conteudo 2</div>
    <div id="3" class="escondida">Conteudo 3</div>
    <div id="4" class="escondida">Conteudo 4</div>
    <div id="5" class="escondida">Conteudo 5</div>
</div>

 

A primeira linha funciona perfeitamente, mas a segunda não....

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×