Make multiple div's fixed

Question

Make multiple div's fixed

Navigation

#1 by (2 votes)

0

How to make so that when a div disappears all "stay where they are". I leave an example below 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><buttonid="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 for testing. What I wanted was for the div's to remain the same size after the click of the button. I have tried with position but there is no way they will be quiet ...

PS: I wonder what I'm doing wrong, not just the answer to my problem.

html css posicionamento

asked by anonymous 28.09.2017 / 11:51

1 answer

Function with vectors in C [closed] Cross-Query mySql

score 2 · Accepted Answer

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><buttonid="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>