javascript - Html の折りたたみフィールド

Question

チェックボックスが選択されている場合に折りたたまれる可能性のある Html のフィールドを作成する方法。私はDjangoでプログラミングしています。

よろしく、ギンタレ

Answer 1

タッチ スペースドマン...

非常に使いやすいので、jquery ( http://jquery.com/ )もお勧めします。

ハートビートで作成されたコードを次に示します。

$("#my_checkbox").change( function() { 
   if ($(this).is(':checked')) {
      $("#my_html").hide(); // hide element with id="my_html"
   } else {
      $("#my_html").show(); // show...
   }
});

Answer 2

以下の jQuery コードは、「+」の画像とヘッダーを使用しています。例 + トップ 10

それを使ってアコーディオンを作りました。

$(document).ready(function () {
    $("div#hideable div").hide();
    // add css to show +/- symbols and labels - no point showing them if they don't work!
    $("div#hideable h3 a img").css("display", "inline");
    $("div#hideable label").css("display", "inline");

    $("div#hideable h3 a").toggle(function () {
        $($(this).attr("href")).show();
        imgName = $(this).find('img').attr("src").split("-", 1); //grab the image name so that we get the right one
        $(this).find('img').attr("src", imgName + "-minus.gif"); //change img, alt and label to match action
        $(this).find('img').attr("alt", "-");
        var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1);
        if (sectionId == 0) {
            sectionId = 10;
        }
        labelName = "#lblSection" + sectionId;
        $(labelName).text("click '-' to collapse");
    }, function () {
        $($(this).attr("href")).hide();
        $(this).find('img').attr("src", imgName + "-plus.gif");
        $(this).find('img').attr("alt", "+");
        var sectionId = $(this).attr("href").substring($(this).attr("href").length - 1);
        if (sectionId == 0) {
            sectionId = 10;
        }
        labelName = "#lblSection" + sectionId;
        $(labelName).text("click '+' to expand");
    });
});

Answer 3

jQuery などの JavaScript ライブラリが必要です。アニメーション アクションをイベントに簡単に割り当てることができます。jQuery のドキュメントを読んで学習するか、他の誰かがすぐにここに置くであろうソリューションをカット アンド ペーストしてください...

これは Django 固有の問題ではなく、javascript と html の問題であることに注意してください。