[Resolvido] Hide/show

[Uda10 0]

Bom dia,

 

Tenho este código:

 

 

 

<script>

$(document).ready( function(){

 

$("a.a1").toggle ( function(){

 

$(".n1").show();

 

$(".n2").hide();

 

},

 

function(){ $(".n1").hide()});

});

 

 

</script>

 

 

 

Tenho no corpo os botões; .a1, .a2, .a3, ....

 

Tenho as divs: #n1, #n2, #n3 ......

 

Problema

 

Eu preciso q qnd o

.a1 for clicado: FECHA - #N2, #N3, #N4, #N5 ... | ABRA - #N1

.a2 for clicado: FECHA - #N1, #N3, #N4, #N5 ... | ABRA - #N2

.a3 for clicado: FECHA - #N1, #N2, #N4, #N5 ... | ABRA - #N3

 

 

Fui bem específico p q nn ficassem dúvids.

 

 

 

Agrdeço muito.

[Rafael Sirotheau 43]

De uma forma automatizada, poderias fazer assim:

 

HTML

<div id="n1" class="abreFecha">N1</div>
<div id="n2" class="abreFecha">N2</div>
<div id="n3" class="abreFecha">N3</div>
<div id="n4" class="abreFecha">N4</div>

<button class="buttonAbreFecha a1">A1</button>
<button class="buttonAbreFecha a2">A2</button>
<button class="buttonAbreFecha a3">A3</button>
<button class="buttonAbreFecha a4">A4</button>

 

jQuery (onDomReady)

$(".buttonAbreFecha").click(function(){
   var classe=$(this).attr("class").split(" ");
   var idDiv = 'n'+classe[1].substring(1);


   $(".abreFecha").each(function() {
       if($(this).attr('id') == idDiv)
          return true;                
       $(this).hide();
   });

   $("#"+idDiv).toggle();

   console.debug(idDiv);

});​

 

CSS

.abreFecha{
   display: none;
}​

 

Veja em ação no jsFiddle

 

Se tiveres duvida, dá uma lida na documentação do jQuery -> api.jquery.com

[Henrique Barcelos 290]

Troque:

$(".n1")...

Por

$("#n1")...

[Daniel Soares (DIM) 0]

Primeiramente gostaria de me desculpar caso esteja desrespeitando alguma regra do fórum. Sou novo por aqui e achei melhor não criar um novo tópico para minha dúvida, e sim utilizar um já existente dentro do assunto. Agradeço desde já qualquer orientação, tanto em relação a minha dúvida quanto para uma melhor utilização deste excepcional fórum. Obrigado.

 

Bom, tenho uma página "noticias.html" onde conto com um título para cada notícia seguido de um botão "[+]". Esse botão está associado a uma simples função show/hide em javascript, onde a mesma é orientada pelo id do elemento ( no caso uma div tendo como padrão um display:none ). O clique no botão mostra a notícia por completo, tudo bem simples.

 

No "index.html" tenho pequenas chamadas para as notícias contidas na página "noticias.html". Como devo proceder para que quando o visitante clicar no link da chamada no "index.html" o mesmo seja levado a página "noticias.html", mas com a notícia associada a chamada já sendo exibida (display:block)?

 

Aqui o código utilizado:

 

<script type="text/javascript">
function showStuff(id) {
	document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
	document.getElementById(id).style.display = 'none';
}
</script>

 

Agradeço novamente a atenção de todos.

 

Abraços.

[William Bruno 1501]

você pode enviar um parâmetro na URL. Ler ele com javascript e então decidir qual notícia abrir.

 

 

um document.location.href para pegar a URL, vai te ajudar nisso.

[Daniel Soares (DIM) 0]

você pode enviar um parâmetro na URL. Ler ele com javascript e então decidir qual notícia abrir.

 

 

um document.location.href para pegar a URL, vai te ajudar nisso.

 

 

Muito obrigado pela orientação!

 

Irei pesquisar sobre o assunto e estudar a maneira de faze-lo.

 

Obrigado!

[Daniel Soares (DIM) 0]

Bom, acredito que consegui um avanço em relação a minha necessidade. Na minha página index.html, nos links das chamadas inseri parâmetros nos mesmos. Um exemplo:

 

<a href="noticias.html#mostranoticia1">Leia mais</a>

 

Na página noticias.html fiz o seguinte teste para verificar se os parâmetros estavam sendo enviados:

 

<script type="text/javascript">
function showStuff(id) {
	document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
	document.getElementById(id).style.display = 'none';
}

var parametro = document.location.hash;

if(parametro == '#mostranoticia1') window.alert('Notícia 1');
if(parametro == '#mostranoticia2') window.alert('Notícia 2');
if(parametro == '#mostranoticia3') window.alert('Notícia 3');
if(parametro == '#mostranoticia4') window.alert('Notícia 4');

</script>

 

Em cada link no index.html o parâmetro enviado fazia com que o alert correspondente na página noticias.html fosse devidamente exibido.

 

Acontece que quando eu alterei o código para a minha real necessidade as divs das notícias não foram exibidas.

 

if(parametro == '#mostranoticia1') document.getElementById('noticia1').style.display = 'block';

 

O que estou fazendo errado?

 

Agradeço desde já.

[William Bruno 1501]

opa.. ta bem pertinho cara.

 

Vou te dar uma dica de otimização:

<a href="noticias.html#noticia1">Leia mais</a>

ou seja, já deixa o ID certinho ali no href.

 

 

E então:

window.onload = function() {
      var parametro = document.location.hash;
      parametro = parametro.replace('#','');

      document.getElementById( parametro ).style.display = 'block';

}

inseri o window.onload pois você precisa esperar o DOM estar completo para manipula-lo. Por isso o teu script não funcionou.

 

Assim independente da notícia, você fica com apenas um código. Sem nenhum if.

[Daniel Soares (DIM) 0]

William Bruno, sem palavras! Graças a você, sucesso total! Muito obrigado meu amigo, só tenho a agradecer.

 

De início não funcionou. Fiz então algumas variações de acordo com o seu código e nada. Por fim resolvi utilizar somente a sua função deletando a função responsável pelo show/hide. Testei novamente e funcionou! Por curiosidade voltei a função show/hide para ver o que acontecia e inexplicavalmente continuou a funcionar. Vai entender rs.

 

Se exisitir algo que eu possa fazer por você, pontuá-lo positivamente, recomendá-lo, curtir/seguir, enfim, me diga que será um privilégio contribuir contigo de alguma forma.

 

Um grande abraço e muito obrigado novamente.