divを表示するためにslideDownでtoggleClassを組み合わせようとしています

Question

div内にネストされた一連のボタンがあり、グリッドボタンの半分の下にあるthis pageのように、各ボタンがクリックされたときに2番目のdivを表示しようとしています。

私はtoggleClassを使用して表示と非表示の間でdivを切り替えようとしていますが、うまくいきます。ボタンがクリックされると、divをスライドさせることができないようです。これは、ボタンがクリックされたときに2回目に正しく動作します。

提案がありますか？

$(function(){ 

$("#toprow #button1").click(function(){ 
$("#hiddentext1").toggleClass("showhiddentext1"); 
$("#hiddentext1").slideDown(500); 
}); 

}); 

https://jsfiddle.net/bwoo5789/zhmowu39/

Answer 1

あなたのテキストがボタンの押しにアップ/ダウン切り替えたい場合は、単にslideDownとslideUpメソッドを使用することができます。 slideDownがそれを実行するため、表示の切り替えは必要ありません。

Fiddle

$(function(){ 
    $("#toprow #button1").click(function(){  
    if($("#hiddentext1").is(':hidden')){ 
     $("#hiddentext1").slideDown(500); 
    }else{ 
     $("#hiddentext1").slideUp(500); 
    }  
    }); 
}); 

あなたのdivにoverflow: hiddenを追加びくびく効果ときslideDown完了を削除します。