none
Exibir / Ocutar mais de uma DIV RRS feed

  • Pergunta

  • Olá pessoal,

    Tenho 5 divs, uma abaixo da outra, cada uma carregando um DataGrid. Logo acima de cada div tenho um botão para exibir/ocultar a div correspondente. O q preciso fazer é, ao clicar em um dos botões todas as outras divis fiquem oultas tornando visível apenas a div correspondente ao botão clicado. Mas isso usando javascript.

    Eu consigo fazer isso em apenas uma div, mas como fazer isso com várias divs?

     

    Grato,

     

    Ilano.

    segunda-feira, 28 de fevereiro de 2011 14:12

Respostas

  • Olá Ilanocf, tudo bem ?

    Segue uma sugestão, que pode ser implementada e posteriormente incrementada:

    //declaração do Array, com tamanho 5(elementos)
    arDivs = new Array(5); 

    arDivs[0] = "idDoDiv1";
    arDivs[1] = "idDoDiv2";
    arDivs[2] = "idDoDiv3";
    arDivs[3] = "idDoDiv4";
    arDivs[4] = "idDoDiv5";

    function ExibirOcultarDivs(id)
    {
         var div;
         for(var i=0; i < 5; i++)
         {
              div = document.getElementById(arDivs[i]);
              if(div.id == id)
              {
                   div.style.display = 'block';
              }
              else
              {
                   div.style.display = 'none';
              }
         }
    }

    Nos botões das relacionados as div's, no onClick você coloca o seguinte código:

    //botão da div 1
    onClick = "ExibirOcultarDivs('idDaDiv1')" // isto para exibir div1 e ocultar as demais

    //botão da div 2
    onClick = "ExibirOcultarDivs('idDaDiv2')" // isto para exibir div2 e ocultar as demais

    e assim por diante..

    Esta hardcoded, mas com base neste pode-se fazer algo mais "dinamico"..

    []'s

    Michel Zerbinatti

    • Sugerido como Resposta Priscila Mayumi Sato segunda-feira, 28 de fevereiro de 2011 16:06
    • Editado Michel Zerbinati segunda-feira, 28 de fevereiro de 2011 16:08 var=i para var i=0
    • Marcado como Resposta ilanocf segunda-feira, 28 de fevereiro de 2011 18:57
    segunda-feira, 28 de fevereiro de 2011 15:56
  • mesmo se criadas dinamicamentes,

    com JQuery fica muito mais facil.

    coloque uma classe para todas as div's, exemplo : <div class="minhaClasse" >

    no script voce usará:

    <script type="text/javascript">
    
    $(function(){
     $('#idBotao').click(function(){
      $('.minhaClasse').css('display','none');
      //tambem pode coloca um efeito
      $('.minhaClasse').toggle(500);
     });
    });
    </script>
    
    No exemplo eu disparo o evento no click  de um botao com id "idBotao".
    Caio Vitullo
    • Sugerido como Resposta Priscila Mayumi Sato segunda-feira, 28 de fevereiro de 2011 18:31
    • Marcado como Resposta ilanocf segunda-feira, 28 de fevereiro de 2011 18:57
    segunda-feira, 28 de fevereiro de 2011 17:24

Todas as Respostas

  • Oi,

    Sugestão:

    http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/Accordion/Accordion.aspx


    Erysson Barros Blog de Erysson Barros Twitter de Erysson Barros
    (Salmos 128:1) - BEM-AVENTURADO aquele que teme ao SENHOR e anda nos seus caminhos.
    segunda-feira, 28 de fevereiro de 2011 14:40
  • COmo você faz com javascript?

    Posta aí que eu posso te ajudar. Já fiz algo parecido dentro de um repeater.

    segunda-feira, 28 de fevereiro de 2011 14:53
  • Como uma div fica assim:

     

    <script type="text/javascript">
            function mostra(id){       
                var div = document.getElementById('teste');
                if (div.style.display == 'none'){
                    div.style.display = 'block';
                }
                else
                {
                    div.style.display = 'none';
                }
            }
       
           
        </script>

    No botão HTML coloco:
    <input type="button" value="mostra/oculta" onclick="mostra('teste');" />
        <div id="teste" style="display:none;">

    segunda-feira, 28 de fevereiro de 2011 14:56
  • Olá Ilanocf, tudo bem ?

    Segue uma sugestão, que pode ser implementada e posteriormente incrementada:

    //declaração do Array, com tamanho 5(elementos)
    arDivs = new Array(5); 

    arDivs[0] = "idDoDiv1";
    arDivs[1] = "idDoDiv2";
    arDivs[2] = "idDoDiv3";
    arDivs[3] = "idDoDiv4";
    arDivs[4] = "idDoDiv5";

    function ExibirOcultarDivs(id)
    {
         var div;
         for(var i=0; i < 5; i++)
         {
              div = document.getElementById(arDivs[i]);
              if(div.id == id)
              {
                   div.style.display = 'block';
              }
              else
              {
                   div.style.display = 'none';
              }
         }
    }

    Nos botões das relacionados as div's, no onClick você coloca o seguinte código:

    //botão da div 1
    onClick = "ExibirOcultarDivs('idDaDiv1')" // isto para exibir div1 e ocultar as demais

    //botão da div 2
    onClick = "ExibirOcultarDivs('idDaDiv2')" // isto para exibir div2 e ocultar as demais

    e assim por diante..

    Esta hardcoded, mas com base neste pode-se fazer algo mais "dinamico"..

    []'s

    Michel Zerbinatti

    • Sugerido como Resposta Priscila Mayumi Sato segunda-feira, 28 de fevereiro de 2011 16:06
    • Editado Michel Zerbinati segunda-feira, 28 de fevereiro de 2011 16:08 var=i para var i=0
    • Marcado como Resposta ilanocf segunda-feira, 28 de fevereiro de 2011 18:57
    segunda-feira, 28 de fevereiro de 2011 15:56
  • Né que a sua é uma idéia legal?

    Mas e se ao invez disso ele colocar todas as divs com uma classe css de mentira, e no evento Mostrar() ele esconder todas as divs daquela classe menos a do id que veio no parametro?

    Não é mais fácil?

    segunda-feira, 28 de fevereiro de 2011 16:06
  • Ilano se for acessar via code elas tem que ter id e deixar runat=server mais se eu fosse vc faria via js fica bem melhor

    http://www.webmasterworld.com/forum91/441.htm


    Não esqueça de usar o componente </> na barra para posta seu código.
    segunda-feira, 28 de fevereiro de 2011 16:45
    Moderador
  • É que o menino vai usar javascript.

    Se as divs são criadas dinamicamente (como eu estou imaginando que são) ele não vai conseguir acessar elas via codigo (ia ter muito trabalho)

    segunda-feira, 28 de fevereiro de 2011 17:08
  • mesmo se criadas dinamicamentes,

    com JQuery fica muito mais facil.

    coloque uma classe para todas as div's, exemplo : <div class="minhaClasse" >

    no script voce usará:

    <script type="text/javascript">
    
    $(function(){
     $('#idBotao').click(function(){
      $('.minhaClasse').css('display','none');
      //tambem pode coloca um efeito
      $('.minhaClasse').toggle(500);
     });
    });
    </script>
    
    No exemplo eu disparo o evento no click  de um botao com id "idBotao".
    Caio Vitullo
    • Sugerido como Resposta Priscila Mayumi Sato segunda-feira, 28 de fevereiro de 2011 18:31
    • Marcado como Resposta ilanocf segunda-feira, 28 de fevereiro de 2011 18:57
    segunda-feira, 28 de fevereiro de 2011 17:24
  • isso aê Caio

    era isso que eu tava sugerindo que ele fizesse... é que eu não lembrava como apagava todas as divs de uma classe XD

     

    Gente, eu sou a favor de que o que for só visual ser feito com jquery o/ A resposta do Caio é tudo o que o menino precisa

    segunda-feira, 28 de fevereiro de 2011 18:31
  • Valeu galera!

    Ficou blz. Obrigadão!!!

    segunda-feira, 28 de fevereiro de 2011 19:00