0
How to make so that when a div disappears all "stay in the place" in which they are. I leave below an example to be more enlightening.
$(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>
This was a small example I created to test. I wanted div’s to keep the same size after clicking the button. I’ve tried position but there’s no way they can stay quiet...
PS: I would like to know what I am doing wrong, not just the answer to my problem.
Yes, but only by giving a height does it work? Because here are the 3 the same size but on the site I’m working on they have different sizes that you don’t know how much (it all depends on what you write and add to them)
– Bruno Gibellino
but you can make a good one with
jQuery
, I’ll make an example– Rafael Augusto
@Brunogibellino I edited the code
– Rafael Augusto