Toggle

[Simpsons 0]

Eu estou fazendo um menu toggle.

 

E eu gostaria de saber, como posso adaptar meu codigo javascript, para quando eu clicar em um link com ID 1 ele utilize a DIV com o ID 1, se o link for ID 2 ele utiliza a DIV com ID 2, e assim por diante, para cada link, tem uma div com o mesmo ID.

 

Exemplo

 

<a href="#" id="1">Botão 1</a>

<div class="1" style="display:none; background-color:#4CF;width:100%;height:200px;">

<a href="#" id="2">Botão 2</a>

<div class="2" style="display:none; background-color:#4CF;width:100%;height:200px;">

 

E eu tenho o codigo javascript:

 

<script type="text/javascript">
  $(function()
   {
    $('#1').click(function() 
      {
       $('.1').slideToggle('fast');
       return false;
      });

   });
</script>

 

Toda ajuda será bem vinda

 

Valew

[paulojuchem 20]

mude os seus links para

 

<a href="#" class='ln' ref='1' >Botão 1</a>
<a href="#" class='ln' ref='2' >Botão 2</a>
<a href="#" class='ln' ref='n' >Botão n</a>

e nas divs voce pode colocar o id mesmo

 

<div id="ln_1" style="display:none; background-color:#4CF;width:100%;height:200px;">
<div id="ln_2" style="display:none; background-color:#4CF;width:100%;height:200px;">
<div id="ln_n" style="display:none; background-color:#4CF;width:100%;height:200px;">

agora o js para dar o efeito

 

var lns = document.getElementsByClassName('ln');

for(var i in lns){

    lns[i].onclick = function(){

        var target = document.getElementById('ln_'+lns[i].getAttribute('ref'));
        target.style.display = 'block'; //aqui vc pode por o teu efeito $(target).slideToggle('fast');

    }

}

 

obs : nao testei mas eh mais ou menos por ai

[Simpsons 0]

Oi paulojuchem. Valew mesmo pela ajuda.

 

Então... Testei aqui, mas não funcionou não, você me ajudaria a fazer esse código ficar funcional ? Dai ficaria mais fácil para eu estudar.

 

Valew amigo

[Simpsons 0]

Ninguem vai me dar uma força ? To precisando fazer esse código funcionar.

 

Vamos Amigos. Please.

[William Bruno 1501]

<a href="#div1" class="btn">Botão 1</a>

<div id="div1" style="display:none; background-color:#4CF;width:100%;height:200px;">

 

 

<a href="#div2" class="btn">Botão 2</a>

<div id="div2" style="display:none; background-color:#4CF;width:100%;height:200px;">

 

 

<script type="text/javascript">

$(function(){

 

$('.btn').click(function(){

var $this = $(this);

$( $this.attr('href') ).slideToggle('fast');

return false;

});

});

</script>

[Simpsons 0]

Valew william Bruno pela força.