Make several div’s Fixed

Asked

Viewed 24 times

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.

1 answer

2


You say so?

$(document).ready(function(){
$("button").click(function(){
    var tamanho = $(this).parent().height();
    
    $(this).parent().css('height', tamanho+'px')
    
    
  
    
    //alert(tamanho)
	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.dsadasdasdasdasdasdasdasdsadsadasdsadasdasdasdasdsa</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>

  • 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)

  • but you can make a good one with jQuery, I’ll make an example

  • @Brunogibellino I edited the code

Browser other questions tagged

You are not signed in. Login or sign up in order to post.