MVC create view Jqueryの表示と非表示

Question

MVCプロジェクトで作業していますが、作成ビューでは、ユーザーがボタンを押したときに表示されるのは特定のdivのみです。

私は働いているものを作った。

のjQuery：

<script type="text/javascript"> 

    function toggle_div_fun(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'none') 
      divelement.style.display = 'block'; 
     else 
      divelement.style.display = 'none'; 
    } 

</script> 

<script type="text/javascript"> 

    function toggle_div_fun2(id) { 

     var divelement = document.getElementById(id); 

     if (divelement.style.display == 'none') 

      divelement.style.display = 'block'; 

     else 
      divelement.style.display = 'none'; 
    } 

</script> 

HTML：

<button onclick="toggle_div_fun('Content');">Content</button> 
<button onclick="toggle_div_fun2('Image');">Image</button> 


     <div class="form-group", id="Content"> 
      @Html.LabelFor(model => model.ItemContent, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.TextArea("ItemContent", new { @class = "form-control", @placeholder = "De inhoud van het item content", rows = "6", cols = "20" }) 
       @Html.ValidationMessageFor(model => model.ItemContent, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group", id="Image"> 
      @Html.LabelFor(model => model.ItemContent, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.CreateDate, new { htmlAttributes = new { @class = "form-control datepicker", type = "date", @placeholder = "Kies hier de foto" } }) 
       @Html.ValidationMessageFor(model => model.ItemContent, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

これは動作するようです。 ボタンを押すたびにdivが消えます。しかし、 divを表示するには、ボタンを押してdivを表示するまでdivを表示します。

皆さん、お手伝いしますか？

Answer 1

あなたはCSSルール

#Content, #Image { display:none; } 

入力パラメータに基づいてtoggle_div_funと同様の動作を行うようにさらに機能toggle_div_fun2が冗長である

を使用して初期表示状態を設定することができます。そのうちの1つを削除します。

Answer 2

Jqueryを使用しているため、コントロールを表示/非表示にすることができます。

$("#Content").show(); 

    $("#Content").hide();