ブートストラップ：パネルのスライドアップ/スライドダウンまたはアコーディン

Question

私は、パネルの見出しと、パネルのリロード時にデフォルトで説明を持つパネル本体を持っています。 +シンボルをクリックすると、表示される内容とその説明が削除されます。

すべて正常に動作しています。しかし、私はのスライドアップを入力すると説明が表示されますが、ストロークで突然表示されます。

time unitを使用するとできますが、フェードイン効果が追加されます。私は欲しくない。あなたは説明が突然表示されますその後、パネル本体をスライドさせると

$('.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>

はここ JSFiddle

です。 どうすれば解決できますか？

助けがあれば助かります。

ありがとうございます。

Answer 1

あなたはスライドするのにかかる時間を正確に一致させるのは難しいだろう、タイムアウトを使用する必要はありません。 slideUp()方法は、アニメーションが完了すると、コールするコールバック関数を持って、正確に何をしたいが

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

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

Answer 2

デフォルトのコンテンツが表示される前に、timeoutを追加してください。

フィドル：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>