Fix button position when toggle-CodePudding

The button's position is fix on top when toggle like below:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>

<button>Toggle slideUp() and slideDown()</button>
<p>This is a paragraph.</p>



</body>
</html>

However, when i shift the button to below, it will shift up when toggle.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>


<p>This is a paragraph.</p>
<button>Toggle slideUp() and slideDown()</button>

</body>
</html>

I am trying to achieve the second method with the button fix at the same location. Any suggestion?

CodePudding user response：

You could try this method:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();

  });
});
</script>
</head>
<body>

<style>
p {
    margin: 0;
    padding: 0;
}
.myDiv {
    height: 20px;
}
</style>

<div >
    <p>Test Stuff</p>
</div>
<button>Toggle slideUp() and slideDown()</button>

</body>
</html>