ボタンを押したらテキストを表示、非表示させ、さらにアニメーションでさせたい

Question

先ほど質問させて頂きまして、ボタン押下時の表示・非表示はtoggle()を利用して解決しました。
ありがとうございます。

先ほどのものにプラスで表示・非表示の際にアニメーションを付けたいと思います。

現在のHTMLとJavaScriptは以下の物になっております。

HTML

<div id="clcbtn"> <img src="btn.jpg"> </div> <div class="listtext"> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> </div>

JavaScript
$(function(){
// 「id="clcbtn"」がクリックされた場合
$("#clcbtn").click(function(){
// 「class="listtext"」の表示、非表示を切り替える
$(".listtext ul").toggle();
});
});

以上です。
付けたいアニメーションとしては、ボタンがクリックされる毎に
「上から出てきたり」「下から隠れたり」させたいなと思っております。

宜しくお願いします。

Answer 1

toggle() を slideToggle() に変えるだけでできます。

$(function(){
    // 「id="clcbtn"」がクリックされた場合
    $("#clcbtn").click(function(){
        // 「class="listtext"」の表示、非表示を切り替える
        $(".listtext ul").slideToggle();
    });
});

Comments

[takeaduma]

ありがとうございます！
見るとすぐにできるようなものだったのですね。
自分の知識の浅はかさを痛感いたしました…