The division element shifts to the left upon invoking the slideUp() function

I am currently working on a page that contains a form with two different sections - one is visible and the other is hidden. When the user clicks a button in the first section, it slides up using slideUp() while the hidden section slides down using slideDown(). However, I have encountered a problem where the first section moves to the left momentarily before returning to its original position once the hidden section slides down. I suspect this issue may be related to another div located next to the form, as removing it resolves the problem. I am unsure of what is causing this behavior and would greatly appreciate any assistance.

Here are the HTML divs:

<div class="tips">

 //irrelevant                   

 </div> 

 <form action="rideHandler.php" method="POST" id="tripinfo">
   <div class ="choosing" id="choosing" >
    
     <button type="button" class="subBtn" id="show"> Finish up</button>
   </div>
   

  <div class="confirmation" id="confirmation" style ="display:none";>

  </div>

</form>

JavaScript code for the click event:

$('#show').click(function(e) {
     
 $("#choosing").slideUp();
 $("#confirmation").slideDown();

CSS styling used:

.tips{
    background-color: white;
    display:inline-block;
    float: right;
    width:20vw;
    height:35vw;
    padding:80px;
    margin-right:50px;
    text-align: center;
    border: 2px solid;
    border-width: 3px 4px 3px 5px;
    border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
    transform: rotate(2deg);
    margin-top:90px;
    
}

.choosing, .confirmation{
      margin: 0 auto;
      margin-bottom: 40px;
      padding:20px;
      width:35vw;
      text-align: center;
      background-color: whitesmoke;
      border: 3px solid;
      margin-top:100px;
}
javascripthtmljquerycss

Answer №1

There seems to be a conflict between jQuery's implementation of slideUp() and the auto side margins in your code. I managed to resolve this issue in the example below by using the calc function to set the side margins, but it could also be solved using flex.

$('#show').click(function(e) {

  $("#choosing").slideUp();
  $("#confirmation").slideDown();
})
.tips {
  background-color: white;
  display: inline-block;
  float: right;
  width: 20vw;
  height: 35vw;
  padding: 80px;
  margin-right: 50px;
  text-align: center;
  border: 2px solid;
  border-width: 3px 4px 3px 5px;
  border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  margin-top: 90px;
}

.choosing,
.confirmation {
  margin: 0 calc(50% - 17.5vw); /* adjusted this line */
  margin-bottom: 40px;
  padding: 20px;
  width: 35vw;
  text-align: center;
  background-color: whitesmoke;
  border: 3px solid;
  margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tips">

  // not relevant

</div>

<form action="rideHandler.php" method="POST" id="tripinfo">
  <div class="choosing" id="choosing">

    <button type="button" class="subBtn" id="show"> Finish up</button>
  </div>


  <div class="confirmation" id="confirmation" style="display:none" ;>

  </div>

</form>

Answer №2

Make sure to delete the float and inline properties. Adjust the margins properly to align the block with the class .tips.

$('#show').click(function(e) {
  e.preventDefault();
  $("#choosing").slideUp();
  $("#confirmation").slideDown();
});
.tips {
  background-color: white;
  width: 20vw;
  height: 35vw;
  padding: 80px;
  margin: 0 50px 0 auto;
  text-align: center;
  border: 2px solid;
  border-width: 3px 4px 3px 5px;
  border-radius: 95% 4% 92% 5%/4% 95% 6% 95%;
  transform: rotate(2deg);
  margin-top: 90px;
}

.choosing,
.confirmation {
  margin-bottom: 40px;
  padding: 20px;
  width: 35vw;
  text-align: center;
  background-color: whitesmoke;
  border: 3px solid;
  margin-top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tips">

  //irrelevant

</div>

<form action="rideHandler.php" method="POST" id="tripinfo">
  <div class="choosing" id="choosing">

    <button type="button" class="subBtn" id="show"> Finish up</button>
  </div>


  <div class="confirmation" id="confirmation" style="display:none" ;>

  </div>

</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Separating Angular JS controller and Factory into individual files allows for easier organization and

As someone new to web development and Angular, I recently created a module, factory, and controller all in the same file (app.js). Below is an example of the code: //Main Module var ipCharts = angular.module('ipCharts', []); //Factory ipCharts. ...

javascriptangularjs

Conserving node.js native imports for Electron with rollup

I am working on a project using Electron, Svelte, and Typescript. Initially, I used a specific template from here, but it restricted access to node.js built-in imports like fs for security reasons in the browser/electron frontend. However, I do not requir ...

javascriptnode.jstypescriptelectronrollup

Arranging Bootstrap 4 columns in a vertical stack

My HTML code is as follows: <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="description" content="description"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <li ...

htmlcssbootstrap-4

Sending data with React using POST request

Currently in my React application, I have a form that includes fields for username and password (with plans to add "confirm password" as well). When submitting the form, I need it to send JSON data containing the email and password in its body. The passwo ...

javascriptnode.jsreactjspostaxios

Customizing the default settings of a d3 funnel chart

I recently used the following link to create a funnel chart using D3: jakezatecky/d3-funnel Everything was working perfectly. However, I wanted to adjust the block heights in proportion to their weight as mentioned in the tutorial by changing the D3 defau ...

javascriptd3.js

Error in THREE.js: Unable to access property 'lib' from an undefined source (THREE.ShaderUtils.lib["normal"])

I have been working on the challenges provided in the WebGL introductory book by Oreilly. Encountered a runtime error with the following code snippet. After searching online, it seems like I am the only one facing this issue. Could you please assist me in ...

javascriptthree.jswebgl

What is the most effective way to alphabetically organize a Javascript array?

Is there a more professional way to sort people alphabetically by last name in an array? Here is the array I'm working with: const people = [ 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd' ...

javascriptarrayssorting

Exploring the focus() method of refs in Vue 3

I'm struggling to comprehend why my straightforward test case keeps failing. As I delve into the world of testing in Vue, I've created a simple test where the element.focus() is triggered onMount(() => /* see implementation ...

javascriptvue.jsvitest

React Native Child Component State Update Issue

In my code, there is a Child component that triggers a function in the Parent component. However, when the function is triggered, an error related to the setState method is thrown. Issue with Promise Rejection (id: 0): The '_this12.setState' i ...

javascriptfacebookreactjsreact-native

What is the method for ensuring the banner image is visible behind the transparent navigation bar?

I recently used Bootstrap 4 to write the code below. In the image provided, I have outlined what my goal is with this code. Thank you! https://i.sstatic.net/oB6b6.jpg <style> div.jumbotron { background: #458392 url("img/ban ...

htmlcsstwitter-bootstrapnavbar

"Eliminate the headers of columns within the collapsible rows on the ui-grid interface

I am working with an expandable table and trying to figure out how to hide the column headers for only the expandable rows within the table. I experimented with including showHeader : false in the subGridOptions, but without success as the headers are stil ...

javascriptangularjsangular-ui-grid

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

css

Tips for maintaining the menu state following a refresh

Is there a way to save the menu state when pressing F5? I'm looking for a similar functionality as seen on the Binance website. For example, clicking on the Sell NFT's submenu and then refreshing the page with F5 should maintain the menu state on ...

javascriptangulartypescript

I am attempting to transfer information from one page to another in Next.js, but unfortunately, I am experiencing difficulties in

Encountering the following error message: "Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead." Any assistance will be greatly appreciated. export default func ...

javascriptreactjsnext.js

Is there a way for the remaining divs in a column to match the width of the widest div?

I'm attempting to ensure that the divs in a column take the width of the widest element, with the exception of the top div which should span 100% of the screen. How can this particular layout be achieved? Please refer to the image below for a clear ex ...

htmlcss

Top technique for mirroring a website

Recently, I created a directory for a client's website. The site is fully operational, but the client would like a replicated version for testing and learning purposes. To create a full replica of his website, it will require hours of work to change ...

phpjavascriptjqueryhtmlreplication

Incorporating components into Vue while utilizing Flask poses a challenge

Currently, I am working on a project that involves Flask and Vue. I am attempting to add a carousel to my website, but I am running into difficulties with creating and importing components for Vue when following tutorials. Here is my current file structure ...

pythonhtmlvue.jsflaskimport

Node.js to Django cross-site request forgery (CSRF) vulnerability

I am struggling to pass the csrftoken from node.js to django. Below is the code snippet from my server.js: socket.on('unread global', function (data) { var values=querystring.stringify(); var options = { hostname:'localhost', por ...

javascriptjquerydjangonode.js

Transform PHP array into a JavaScript array

Currently, I am using Laravel and retrieving a list of values from a database with the following code: $idordenes = DB::table('ordenes')->select('id')->get(); Upon echoing the idordenes variable, the output is as follows: [{"fa ...

javascriptphparrayshtmlweb

Is it possible to submit two forms simultaneously using jQuery or AJAX?

My plan is to save 2 forms, with the first form providing the Foreign key for the second form. This is my attempt at saving this using JavaScript: $("#btnSave").click(function (e) { e.preventDefault(); $('#workForm').submit(); ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-3