slideUp() animation doesn't work on first click

Question

I have a sample accordion I created; the problem is simple: the slideUp() animation doesn't work on first click on any accordion item. I'm still not that skillful on chaining jquery methods so my question is: where should I chain the slideUp() method? Because the adding and removing of class name .active on the .accordion-item parents complicate it.

 $(document).ready(function() { $("[class^='accordion-item'] > button").on('click', function() { $(this).next().slideDown(400).parent().addClass('active').siblings().removeClass('active').children('div').slideUp(400); }) }) 

 * { box-sizing: border-box; outline: none; } #accordion { width: 100%; } #accordion .accordion-item-1 button { width: 100%; border: none; background: cornflowerblue; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-1 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-1 button:hover { background: #3676e8; cursor: pointer; } #accordion .accordion-item-1 div { padding: 1rem; background: #92b4f2; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-1.active button { background: #3676e8; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-1.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-1.active div { display: block; } #accordion .accordion-item-2 button { width: 100%; border: none; background: salmon; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-2 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-2 button:hover { background: #f85441; cursor: pointer; } #accordion .accordion-item-2 div { padding: 1rem; background: #fcaca3; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-2.active button { background: #f85441; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-2.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-2.active div { display: block; } #accordion .accordion-item-3 button { width: 100%; border: none; background: seagreen; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-3 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-3 button:hover { background: #21653f; cursor: pointer; } #accordion .accordion-item-3 div { padding: 1rem; background: #3bb16f; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-3.active button { background: #21653f; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-3.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-3.active div { display: block; } #accordion .accordion-item-4 button { width: 100%; border: none; background: violet; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-4 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-4 button:hover { background: #e855e8; cursor: pointer; } #accordion .accordion-item-4 div { padding: 1rem; background: #f4aff4; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-4.active button { background: #e855e8; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-4.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-4.active div { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div id="accordion"> <div class="accordion-item-1 active"> <button><i class="fa fa-caret-right"></i><span>Item 1</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-2"> <button><i class="fa fa-caret-right"></i><span>Item 2</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-3"> <button><i class="fa fa-caret-right"></i><span>Item 3</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-4"> <button><i class="fa fa-caret-right"></i><span>Item 4</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> </div> 

Answer 1

The issue is because you immediately remove the active class on the sibling divs. This causes the first jump. Instead, you should remove that class after the slide animation has completed. You can use the callback of slideUp() to do that.

Also note that your CSS has far too much repetition. You can simplify it by using base classes to group common rules, then adding the specific colours to targeted elements, like this:

 $(function() { $("[class^='accordion-item'] > button").on('click', function() { var $btn = $(this); $btn.next().slideDown(400); $btn.closest('div').addClass('active').siblings().find('div').slideUp(400, function() { $(this).closest('.accordion-item').removeClass('active') }); }); }) 

 * { box-sizing: border-box; outline: none; } #accordion { width: 100%; } #accordion .accordion-item button { width: 100%; border: none; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-1 button { background: cornflowerblue; cursor: pointer; } #accordion .accordion-item button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item.active button { box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item div { padding: 1rem; color: #fff; line-height: 2; display: none; } #accordion .accordion-item.active div { display: block } ; #accordion .accordion-item-1 button { background: cornflowerblue; } #accordion .accordion-item-1 button:hover, #accordion .accordion-item-1.active button { background: #3676e8; } #accordion .accordion-item-1 div { background: #92b4f2; } #accordion .accordion-item-2 button { background: salmon; } #accordion .accordion-item-2 button:hover, #accordion .accordion-item-2.active button { background: #f85441; } #accordion .accordion-item-2 div { background: #fcaca3; } #accordion .accordion-item-3 button { background: seagreen; } #accordion .accordion-item-3 button:hover, #accordion .accordion-item-3.active button { background: #21653f; } #accordion .accordion-item-3 div { background: #3bb16f; } #accordion .accordion-item-4 button { background: violet; } #accordion .accordion-item-4 button:hover, #accordion .accordion-item-4.active button { background: #e855e8; } #accordion .accordion-item-4 div { background: #f4aff4; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <div id="accordion"> <div class="accordion-item accordion-item-1 active"> <button><i class="fa fa-caret-right"></i><span>Item 1</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item accordion-item-2"> <button><i class="fa fa-caret-right"></i><span>Item 2</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item accordion-item-3"> <button><i class="fa fa-caret-right"></i><span>Item 3</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item accordion-item-4"> <button><i class="fa fa-caret-right"></i><span>Item 4</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> </div> 

Answer 2

Adding display:block to the div inside your active accordion div initially will solve your problem

 $(document).ready(function() { $("[class^='accordion-item'] > button").on('click', function() { $(this).next().slideDown(400).parent().addClass('active').siblings().removeClass('active').children('div').slideUp(400); }) }) 

 * { box-sizing: border-box; outline: none; } #accordion { width: 100%; } #accordion .accordion-item-1 button { width: 100%; border: none; background: cornflowerblue; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-1 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-1 button:hover { background: #3676e8; cursor: pointer; } #accordion .accordion-item-1 div { padding: 1rem; background: #92b4f2; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-1.active button { background: #3676e8; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-1.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-1.active div { display: block; } #accordion .accordion-item-2 button { width: 100%; border: none; background: salmon; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-2 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-2 button:hover { background: #f85441; cursor: pointer; } #accordion .accordion-item-2 div { padding: 1rem; background: #fcaca3; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-2.active button { background: #f85441; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-2.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-2.active div { display: block; } #accordion .accordion-item-3 button { width: 100%; border: none; background: seagreen; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-3 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-3 button:hover { background: #21653f; cursor: pointer; } #accordion .accordion-item-3 div { padding: 1rem; background: #3bb16f; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-3.active button { background: #21653f; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-3.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-3.active div { display: block; } #accordion .accordion-item-4 button { width: 100%; border: none; background: violet; color: #fff; padding: 1rem 0; position: relative; -webkit-transition: box-shadow 400ms ease-in-out; transition: box-shadow 400ms ease-in-out; } #accordion .accordion-item-4 button i { position: absolute; left: 1rem; top: .6rem; font-size: 2rem; -webkit-transition: -webkit-transform 400ms ease-in-out; transition: -webkit-transform 400ms ease-in-out; transition: transform 400ms ease-in-out; transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out; } #accordion .accordion-item-4 button:hover { background: #e855e8; cursor: pointer; } #accordion .accordion-item-4 div { padding: 1rem; background: #f4aff4; color: #fff; line-height: 2; display: none; } #accordion .accordion-item-4.active button { background: #e855e8; box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4); } #accordion .accordion-item-4.active button i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #accordion .accordion-item-4.active div { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <div id="accordion"> <div class="accordion-item-1 active"> <button><i class="fa fa-caret-right"></i><span>Item 1</span></button> <div style="display:block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-2"> <button><i class="fa fa-caret-right"></i><span>Item 2</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-3"> <button><i class="fa fa-caret-right"></i><span>Item 3</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> <div class="accordion-item-4"> <button><i class="fa fa-caret-right"></i><span>Item 4</span></button> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident consectetur debitis a ipsam animi necessitatibus optio itaque amet? Aliquam quo nobis quis, quisquam necessitatibus commodi consequuntur dolor quae fugit numquam.</div> </div> </div>