Div desaparece após toggle de outro

[XicoXperto]

Boas tardes pessoal!

isto é o seguinte quero fazer um div dividido por titulo e conteudo, e quando é clicado no titulo o div abre/fecha, isto é, o conteudo desaparece e o div pai "encolhe". Para issto é necessário mudar a classe do div pai porque são diferentes as imagens que o constituem.

O roll up está a funcionar bem, o problema é que o div titulo desaparece quando é "fechado" o pai o que não deveria acontecer.

código HTML

<div class="blueTopOpen">
<div class="title">
	<p> <img class="arrow" src="images/style/icons/arrrow-bottom.png" /> abrir/fechar</p>
</div>
<div class="container" style="height:200px;">
	<!-- conteudo -->
</div>
</div>

código CSS

div.blueTopOpen,
div.blueTopClosed  {
min-height:45px; 
min-width: 10px;
	width: 300px;
}

div.blueTopOpen {
background: 
	url(images/style/div/blue-top-open/top-right.jpg) top right no-repeat,
	url(images/style/div/blue-top-open/top-left.jpg) top left no-repeat,
	url(images/style/div/blue-top-open/top-center.jpg) top repeat-x,
	url(images/style/div/blue-top-open/bottom-right.jpg) bottom right no-repeat,
	url(images/style/div/blue-top-open/bottom-left.jpg) bottom left no-repeat,
	url(images/style/div/blue-top-open/bottom-center.jpg) bottom  repeat-x,
	url(images/style/div/blue-top-open/center-right.jpg) right repeat-y,
	url(images/style/div/blue-top-open/center-left.jpg) left repeat-y;
background-color: #EEEEEE;
}

div.blueTopClosed {
background: 
	url(images/style/div/blue-top-closed/right.jpg) top right no-repeat,
	url(images/style/div/blue-top-closed/left.jpg) top left no-repeat,
	url(images/style/div/blue-top-closed/center.jpg) top repeat-x;
}

div.blueTopOpen div.title,
div.blueTopClose div.title {
width: 100%;
height: 45px;
display: block;
cursor: pointer;
top: 0;
bottom: 0;
	background-color: blue;
}

div.blueTopOpen div.title p,
div.blueTopClose div.title p {
padding: 10px 20px 10px 20px;
}

código jQuery

$(".title").click(function () {
	// check if it is open or closed
	if ( $(this).parent().hasClass("blueTopOpen") ) {
		// its open, then close
		$(this).parent().find(".container").slideToggle("slow", function () {
			// change class after its closed
			$(this).parent().attr("class", "blueTopClosed");});
		//change arrow
		$(this).find("img.arrow").attr("src", "images/style/icons/arrrow-left.png");
	} else { // its closed, then open
		// change class to open
		$(this).parent().attr("class", "blueTopOpen");
		// open
		$(this).parent().find(".container").slideToggle("slow");
		//change arrow
		$(this).find("img.arrow").attr("src", "images/style/icons/arrrow-bottom.png");
	}	
});

Preciso do código o mais genérico possivel porque vai haver varios destes div numa mesma página, por isso preciso que não selecione os div's directamente ($(".container"), $(.blueTopOpen)).

O div titulo está a azull para melhor percepção do que acontece

Esta imagem é a inicial

http://img836.imageshack.us/img836/6387/capturadeecr2012049s145.png

depois o div "desaparece" no entanto o seu conteudo fica

http://img844.imageshack.us/img844/6387/capturadeecr2012049s145.png

Agradeço se alguém me puder ajudar.

Abraço!

--

Edit(brunoais):

• Identificação da linguagem das tags code
  

[pauloalexandre]

olá!

Pelo que testei, está o javascript está a funcionar bem... existe é algum problem no CSS, mais concretamente na classe "blueTopClosed".

Paulo Dias

[XicoXperto]

hmm,

eu testei usando ids para cada um e funciona bem, o problema encontrei-o aqui:

$(this).parent().find(".container").slideToggle("slow", function () {
                                // change class after its closed
                                $(this).parent().attr("class", "blueTopClosed");});

 

mais precisamente na ultima linha...

Por isso não entendo como é que contigo o código funcionou o.o

[XicoXperto]

de qualquer forma obrigado, e ainda vou tentar ver se o erro estará no CSS, mas como disse, testei com os ids especificos e funcionou bem, mas pronto, realmente é esquesito

[Xis]

O código CSS define 3 classes: "blueTopOpen", "blueTopClosed" e "blueTopClose".

Não querias definir antes só 2 classes: "blueTopOpen" e "blueTopClosed"?

[XicoXperto]

O código CSS define 3 classes: "blueTopOpen", "blueTopClosed" e "blueTopClose".

Não querias definir antes só 2 classes: "blueTopOpen" e "blueTopClosed"?

É isso mesmo!!!!

Obrigadão! Estive a pensar em desistir da ideia pq não sabia como dar a volta...

olá!

Pelo que testei, está o javascript está a funcionar bem... existe é algum problem no CSS, mais concretamente na classe "blueTopClosed".

Paulo Dias

E quero pedir desculpas ao Paulo, mas como disse com os id's especificos funcionava, pois, mas tambem o CSS estava associado de maneira diferente.

Xis, muito obrigado mesmo!