Htmlの崩壊フィールド

Question

チェックボックスをオンにすると、崩壊する可能性のあるフィールドをHtmlで作成する方法。 私はDjangoでプログラミングしています。

に関して、 Gintare

Answer 1

あなたは、jQueryのJavaScriptライブラリなど、必要 - イベントにアニメーションのアクションを割り当てることが、その簡単に。 jQueryドキュメントを読んで、他の人が間違いなくここに置くことになるソリューションを学んだり、カットアンドペーストしたりしてください。

これはDjango固有の問題で、javascriptとhtmlではありません。

Answer 2

以下のjQueryコードでは、 '+'イメージとヘッダーのイメージを使用しています。例えば+トップテン

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

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

トウシュSpacedman ...

それは使用することは非常に簡単だと私も（http://jquery.com/を）jqueryのをお勧めします。

ここでは、ハートビートに埋め込まれたコードを紹介します。

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