Botao para ocultar/exibir div...

[cassiano óliver 1]

o script pra mostrar/ocultar, ta feito...

to utilizando jquery..

 

<script type="text/javascript">$(function(){   $('#ShowHide').toggle(function(){	  $('div#jan').slideDown("fast");   },function(){	  $('div#jan').slideUp("fast");   });});</script>

Mas agora queria fazer o seguinte...

Por padrão a div ta oculta, na "Barra de título" terá um botão, um + ou uma seta pra baixo, indicando pra expandir a div...

igual tem aqui mesmo no fórum na página inicial, e quando expandir, mostrar o outro botão, a seta pra cima por ex,

 

como fazer isso?

 

no aguardo...

[Otata 4]

na função que faz expadir e a de fechar você troca a imagen

[cassiano óliver 1]

Consegui, mas acho que é gambiarra, ou melhor, solução alternativa... hahaha

mas funcionou, me digam se está correto ou não..

 

Criei 2 divs: show, hide..

nessas divs, coloquei as imagens.

Na div "show", coloquei o "+", e na div "hide", coloquei o "-"..

 

"hide", por padrão fica oculta...

 

no script fiz assim:

<script type="text/javascript">$(function(){   $('#show').click(function(){	  $('div#jan').slideDown("fast");	  $('#hide').show();	  $('#show').hide();   })});$(function(){   $('#hide').click(function(){	  $('div#jan').slideUp("fast");	  $('#show').hide();	  $('#hide').show();   })});</script>

[cassiano óliver 1]

Voltei denovo...

 

Agora a dificuldade já é outra...

 

esse script to montando pra fazer um cadastro de aniversariantes, essa função aí, é somente para a div "jan", correspondente a janeiro, tentei colocar aqui as outras divs com o mesmo id, mas não funciona..

Já se eu fazer cada div com um id diferente, também terei que fazer uma função pra cada uma delas...

 

tem como fazer uma única função, que funcione em todas as divs?

 

a estrutura está assim:

<script type="text/javascript">$(function(){   $('#show').click(function(){	  $('div#jan').slideDown("fast");	  $('#hide').show();	  $('#show').hide();   });   $('#hide').click(function(){	  $('div#jan').slideUp("fast");	  $('#show').show();	  $('#hide').hide();   });});</script><div class="geral" id="geral">	<div id="show"><img src="imagens/expandir.gif" alt="expandir" title="Mostrar aniversariantes" /></div>	<div id="hide"><img src="imagens/recolher.gif" alt="expandir" title="Ocultar aniversariantes" /></div>	<h2 class="titulo">Janeiro</h2>	<div class="aniversariantes" id="jan">		... // Aqui tem o conteúdo, tirei pra não deixar o código muito grande...	</div></div>

[cassiano óliver 1]

Fiz aqui utilizando ao inves do id, a classe...

 

<script type="text/javascript">$(function(){	$('.show').click(function(){		$('.aniversariantes').slideDown("fast");		$('.hide').show();		$('.show').hide();	}	);   $('.hide').click(function(){		$('.aniversariantes').slideUp("fast");		$('.show').show();		$('.hide').hide();   }   );});</script>

Só que agora, sempre que exibir ou ocultar, ele vai fazer em todos as divs (.aniversariantes) ...

 

Será que vou ter que criar uma classe pra cada mês? Não tem como pegar o id da div...

por ex, cada div com uma id: jan, fev, mar...

pegar esse id por uma função?

 

tipo...

 

$(function(id) {........}

tentei mas não consegui...

 

quero poder ocultá-las individualmente, e não todas de uma vez...