Bootstrap : Slideup/ Slidedown or Accordion in Panel

Question

I have a panel heading and a panel body having a description by default when the page reloads. when I click on the + symbol then there are some contents to be displayed and that description to be removed.

everything is working fine. but when I slideup then the description is appeared but it appears suddenly with a kind of stroke.

I can do it using time unit but it adds fade-in effect to it. which i don't want.

 $('.add_discount_plus_minus').on('click', function () { if($(this).text() === "+" ) { $(this).text("-"); $('.club_registration_plus_minus').text("+"); $('.settings_plus_minus').text("+"); $('.add_discount_one_line_description').hide(); $('.show_hide_add_discount_panel').slideDown(); } else { $(this).text("+"); /*$(this).css('font-size' , '20px');*/ $('.show_hide_add_discount_panel').slideUp(); $('.add_discount_one_line_description').show(); } }) 

 .add_discount_plus_minus { position: absolute; top: 50%; right: 15px; transform: translateY(-100%); font-size: 20px; } .show_hide_add_discount_panel { display: none; } .set_padding_0 { padding: 0 !important; } .set_margin_0 { margin: 0 !important; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="panel panel-default set_padding_0"> <div class="panel-heading text-left"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10"> <span>Add Discount</span> </div> <div class="col-lg-2 col-md-2 col-sm-2"> <span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span> </div> </div> </div> <div class="panel-body "> <div class="row set_margin_0"> <span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span> </div> <div class="show_hide_add_discount_panel "> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> </div> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> <div></div> </div> </div> </div> </div> 

Here is JSFiddle

When you slide up the panel body then the description gets displayed suddenly. How can i solve it?

Any help would b great.

Thank You.

Answer 1

You don't need to use timeout, it will be hard to match exactly the time it takes to slide. The slideUp() method has a callback function to call once the animation is complete, show your default content there

$('.show_hide_add_discount_panel').slideUp(function(){
   $('.add_discount_one_line_description').show();
});

https://jsfiddle.net/hbxqsxjp/2/

Answer 2

Then you should try to add some timeout before you see the default content.

Fiddle : https://jsfiddle.net/qaeed/hbxqsxjp/1/

 $('.add_discount_plus_minus').on('click', function () { if($(this).text() === "+" ) { $(this).text("-"); $('.club_registration_plus_minus').text("+"); $('.settings_plus_minus').text("+"); $('.add_discount_one_line_description').hide(); $('.show_hide_add_discount_panel').slideDown(); } else { $(this).text("+"); /*$(this).css('font-size' , '20px');*/ $('.show_hide_add_discount_panel').slideUp(); setTimeout(function(){ $('.add_discount_one_line_description').show(); }, 1000); } }) 

 .add_discount_plus_minus { position: absolute; top: 50%; right: 15px; transform: translateY(-100%); font-size: 20px; } .show_hide_add_discount_panel { display: none; } .set_padding_0 { padding: 0 !important; } .set_margin_0 { margin: 0 !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="panel panel-default set_padding_0"> <div class="panel-heading text-left"> <div class="row"> <div class="col-lg-10 col-md-10 col-sm-10"> <span>Add Discount</span> </div> <div class="col-lg-2 col-md-2 col-sm-2"> <span class="pull-right cursor_pointer add_discount_plus_minus font-bold font_size_17">+</span> </div> </div> </div> <div class="panel-body "> <div class="row set_margin_0"> <span class="add_discount_one_line_description"> Code, Offer Name, Discount Amount, Uses Per Offer, Group Discounts </span> </div> <div class="show_hide_add_discount_panel "> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> </div> <div class="row margin_top_10 set_margin_0"> <span>Some contents to be displayed</span> <div></div> </div> </div> </div> </div>