Como fazer para que ao desaparecer uma div todas "fiquem no sitio" em que estão. Deixo abaixo um exemplo para ser mais esclarecedor.
$(document).ready(function(){
$("button").click(function(){
if($("#p" + $(this).attr("id")).is(":visible")){
$("#p" + $(this).attr("id")).fadeOut("slow");
} else {
$("#p" + $(this).attr("id")).fadeIn("slow");
}
});
});
div{
/* position: ???; Já exprimentei vários values mas nada...
Já não sei o que pôr */
margin-left: 5%;
margin-top: 5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button id="1">Click me 1!</button>
<p id="p1">Click to disappear 1.</p>
</div>
<div>
<button id="2">Click me 2!</button>
<p id="p2">Click to disappear 2.</p>
</div>
<div>
<button id="3">Click me 3!</button>
<p id="p3">Click to disappear 3.</p>
</div>
Este foi um pequeno exemplo que criei para testar. O que queria é que as div's mantivessem o mesmo tamanho após o click do button. Já tentei com position mas não há maneira de elas ficarem sossegadas...
PS: Gostaria de saber o que estou a fazer errado, não apenas a resposta para o meu problema.