javascriptを使用してhtmlのセクションをスライドさせる最善の方法は何ですか？

Question

私は自分のHTMLテンプレート（Djangoテンプレートを使用しています）に隠れセクションを持っています。隠しセクションはログインフォームです。ユーザーがログインテキスト（リンク）をクリックすると、フォームを隠すhtmlテキストが下にスライドします形。

私はこれがJavascriptで実行できると感じています！

djangoを使用していますが、私のプロジェクトにjavascriptを組み込む方法の詳細な手順を示してください。

ヘルプ

ガテ

Answer 1

私はジャンゴを使用していないが、私はJQueryが正確に何をしたいんだろうということを伝えることができます。 JQueryライブラリをインクルードしてから、slideDown（）およびslideUp（）関数を使用してフォームを表示する必要があります。

あなたの後ろのものの大まかな例です。あなたがjQueryを使用している場合はより多くの情報

<script> 
    $("#toggleForm").click(function() { 
     if ($("#loginForm").is(":hidden")) { 
     $("#loginForm").slideDown("slow"); 
     } else { 
     $("#loginForm").slideUp("slow"); 
     } 
    }); 
</script> 

<div id='toggleForm'>Show Login</div> 
<div id='loginForm'> 
Your form goes here! 
<div> 

Answer 2

ためJQuery documentationを確認し、このようなものは、あなたが理想的にしたいと思うよう

もちろん

$('.login-link').bind('click', function(e) { // bind event handler to click of login link 

    $('#login-panel').slideDown(); // slide down the panel 
    e.preventDefault(); // stop the link taking you to the js disabled login page 

}); 

が、これは、唯一の出発点であるトリックを行う必要があります連続するクリックごとに上下にスライドすることができます。

Answer 3

トラビスの応答を続ける。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#toggleForm").click(function() { 
     $("#loginForm").slideToggle("slow"); 
    }); 
    }); 
    </script> 
<div id='toggleForm'>Show Login</div> 
<div id='loginForm'> 
Your form goes here! 
<div> 

slideToggle（）はあなたの友人です。