Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

msena

Efeito jQuery toggle para revelar e esconder várias DIVs?

Por , em Javascript

Recommended Posts

macielcr7    9

macielcr7
Postado

é só dá o nome da classe para as outras divs....

 

mais se você quiser revelar varias ao mesmo tempo poste seu codigo....

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Augusto    417

Bruno Augusto
Postado

Não exatamente APENAS através do atributo class.

 

Com a jQuery você pode usar qualquer combinação de seletores. Se você não quiser "sujar" a marcação, pode se basear no atributo rel, por exemplo.

 

Ou, em você conhecendo os ID's dos elementos que participarão do esconde-esconde e o HTML dessa página seja usado apenas para essa situação em particular (para que outras páginas reusem tais ID's e o JavaScript te deixe louco), pode fazer manualmente, separando os diversos seletores por vírgulas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

entao..

eu tbm cai nessa pegadinha das <div>'s...

pq eu tenho uma classe de tabela, com uma imagem no fundo o nome da classe é "fundo_tabela"

e mo id da div principal é "tamIframe" que eu uso outro codigo js para redimenssionar um iFrame na index.html

eu usei o codigo do exemplo toggle mas nada aconteceu

sera q um codigo entrou em conflito com o outro??

ai vao meus codigos

//redimenssionar iFram - esse codigo vem primeiro
function redimensionarIframe() {
var objIframe = parent.document.getElementById("_buraco"); //nome iframe
var objTam = document.getElementById("tamIframe");//nome div
        objIframe.style.height = (objTam.offsetHeight+50)+"px";
}       
window.onload = redimensionarIframe;


//codigo exemplo toggle
jQuery.fn.toggleText = function(a,B) {
return   this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.fundo_tabela').before('<span class="titulo">Revelar conteúdo</span>');
$('.fundo_tabela').css('display', 'none')
$('span', '#tamIframe').click(function() {
$(this).next().slideToggle('slow')
.siblings('.fundo_tabela:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
.$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.fundo_tabela:visible').prev()
.toggleText('Revelar','Esconder')
});
})

coloquei os dois codigos antes do fechamento da tag <body>

oq fiz errado??

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

Sem ver o código completo ou o script em funcionamento fica um pouco dificil, mas tente isto:

 

Troque:

$('span', '#tamIframe').click(function() {

Por

$('span.titulo').click(function() {

Compartilhar este post

Link para o post
Compartilhar em outros sites

- KbeçãO -    0

- KbeçãO -
Postado

esse é o problema..

os 2 codigos q postei estão inteiros..

mas ja consegui resolver o problema, eu realmente estava usando nomes errados..

mas agora o problema é o seguinte:

nesse codigo do exemplo toggle, ele só faz com uma nomenclatura "Revelar/Esconder Conteudo"

eu consegui mudar para "Revelar/Esconder Cartazes" e "Revelar/Esconder Banners" mas eu tive que reescrever todo o codigo...

e preciso fazer isso com mais 5 nomenclaturas diferentes "Outdoors", "Cartoes" existe alguma forma q eu fassa isso sem ter que reescrever o codigo inteiro??

so pra relembrar, o codigo do exemplo toggle:

 

//codigo exemplo toggle
jQuery.fn.toggleText = function(a,B) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>Revelar conteúdo</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})

Compartilhar este post

Link para o post
Compartilhar em outros sites

JCMais    75

JCMais
Postado

esse é o problema..

os 2 codigos q postei estão inteiros..

mas ja consegui resolver o problema, eu realmente estava usando nomes errados..

mas agora o problema é o seguinte:

nesse codigo do exemplo toggle, ele só faz com uma nomenclatura "Revelar/Esconder Conteudo"

eu consegui mudar para "Revelar/Esconder Cartazes" e "Revelar/Esconder Banners" mas eu tive que reescrever todo o codigo...

e preciso fazer isso com mais 5 nomenclaturas diferentes "Outdoors", "Cartoes" existe alguma forma q eu fassa isso sem ter que reescrever o codigo inteiro??

so pra relembrar, o codigo do exemplo toggle:

 

//codigo exemplo toggle
jQuery.fn.toggleText = function(a,B) {
return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;}));
}
$(document).ready(function(){
$('.tgl').before('<span>Revelar conteúdo</span>');
$('.tgl').css('display', 'none')
$('span', '#box-toggle').click(function() {
$(this).next().slideToggle('slow')
.siblings('.tgl:visible').slideToggle('fast');
// aqui começa o funcionamento do plugin
$(this).toggleText('Revelar','Esconder')
.siblings('span').next('.tgl:visible').prev()
.toggleText('Revelar','Esconder')
});
})

Como estou começando agora a programar em JQuery, ainda sou meio noob enquanto isso, mas o que eu sei é que, se deseja poupar tempo, procure sobre a criação de funções para o Jquery.

Procure mais sobre a ferramenta: jQuery.fn

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito