jQuery jumpy effect when using .slideToggle()

Question

I was following a Udemy Bootcamp that included coding a Todo list using jQuery. The program required the text input to disappear when pressing a "minimize" button by making it fade, but then all the lower elements would just "jump up" once the input disappeared. I thought I'd improve that by replacing it with a slide effect.

The issue is that the input slides up and mostly disappears, then all of a sudden "jumps" up. I already looked on stackOverflow and it seems to be something related to the size/margin or the container, but by fiddling with it (and even setting it and/or removing it through the console), I was still not able to make this effect go away and I think I need some help.

 // Check off todos while clicking. Use on(click) to add event listener // to future elements not yet on page when the code first runs. We apply it to the whole ul for // ("click", "li") means the event listener is applied to the li inside the ul $("ul").on("click", "li", function() { $(this).toggleClass("completed"); }); // Click on X to delete Todo $("ul").on("click", "span", function(event) { $(this).parent().fadeOut(500, function() { $(this).remove(); }); event.stopPropagation(); }); $("input[type='text']").keypress(function(event) { if (event.which === 13) { // grab the text of the new todo from the input var todoText = $(this).val(); $(this).val(""); // create new li to add to the ul $("ul").append("<li>" + "<span><i class='fa fa-trash'></i></span> " + todoText + "</li>"); } }) // Make the plus sign collapse the text input $(".fa-plus").click(function() { $("input").slideToggle(function() { }); });

 body { background: #2980B9; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #FFFFFF, #6DD5FA, #2980B9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } #container { width: 360px; margin: 5% auto; background: #f7f7f7; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); }.completed { color: gray; text-decoration: line-through; }.fa-plus { float: right; } h1 { background: #2980b9; color: white; margin: 0; padding: 10px 20px; text-transform: uppercase; font-size: 24px; font-weight: normal; } ul { list-style: none; margin: 0; padding: 0; } li { background: white; height: 40px; line-height: 2.5em; } li:nth-child(2n) { background: #f7f7f7; } input { font-size: 18px; background-color: #f7f7f7; width: 360px; padding: 13px 13px 13px 20px; box-sizing: border-box; border: 3px solid rgba(0, 0, 0, 0); } input:focus { background: white; border: 3px solid #2980b9; outline: none; } span { background: red; height: 40px; margin-right: 40px; text-align: center; color: white; width: 0; display: inline-block; opacity: 0; transition: 0.2s linear; } li:hover span { width: 40px; opacity: 1; }.hidden { display: none; }

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> <div id="container"> <h1>To-Do List<i class="fa fa-plus"></i></h1> <input type="text" placeholder="Add new Todo"> <ul> <li><span><i class="fa fa-trash"></i></span> First item</li> <li><span><i class="fa fa-trash"></i></span> Second item</li> <li><span><i class="fa fa-trash"></i></span> Third item</li> </ul> </div>

This is just a snippet. I uploaded the whole code on Fiddle and would appreciate any help

Thanks!

Answer 1

instead of toggle the input directly, wrap the input with a div . and then toggle the div

changes to make:

<div id='input'>
   <input type="text" placeholder="Add new Todo">
</div>

$(".fa-plus").click(function() {
    $("#input").slideToggle();
});