divを表示しますか（ASP.NET MVC）

Question

私はASP.NET MVC Webアプリケーションを作成しており、このような画面を持っています。

Screen

私はshow()とhide()方法でJSを経由して、これを行うことができます理解されているように私は、「+」ボタン

をクリックしたときのdivを表示し、非表示にする必要があります。

私はJSなしでこれを行うことができますか、多分私に助言を与えることができます。ここで

は、このブロックのコードが表示

<div style="height: 80%; width: 100%; overflow: auto"> 
 
    <table style=" width: 100%;border-collapse: collapse; overflow: hidden;"> 
 
     @foreach (var item in Model) 
 
     { 
 
       <tr> 
 
        <td style="padding-bottom: 0.5em;padding-top: 1em;"> 
 
         <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'> 
 
          <img src='@Url.Content("~/Images/plus_plus.png")' /> 
 
         </a> 
 
        </td> 
 
        
 
        <td class="table_block" style="text-align: center; margin-left: 15px; margin-top: 15px;"> 
 
         @Html.DisplayFor(modelItem => item.question) 
 
        </td> 
 
        
 
        <td style=" padding-left: 5px;padding-bottom: 0.5em;padding-top: 1em;"> 
 
        
 
         <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'> 
 
          <img src='@Url.Content("~/Images/arrow.png")'/> 
 
         </a> 
 
         
 
         <a href='@Url.Action("Edit", "Companies", new {id = item.QuestionId})'> 
 
          <img src='@Url.Content("~/Images/Edit.png")'/> 
 
         </a> 
 
         
 
         <a href='@Url.Action("Delete", "Companies", new {id = item.QuestionId})'> 
 
          <img src='@Url.Content("~/Images/Delete.png")'/> 
 
         </a> 
 
         
 
        </td> 
 
       </tr> 
 
      } 
 
    </table>

UPDATE

に私はこれを行う方法を見つけましたが、私は内のすべてのブロックを表示/非表示しようとしたときでありますテーブルを隠すか、または表示する。

これを特定の要素に対してのみ行う方法はありますか？

アップデート2

私は@Williamロビンソン・ソリューションを試してみて、ここでは、この

のようなコードを記述したスクリプト

<script type="text/javascript" src="~/scripts/jquery-3.1.1.js"> 
    $('.title').on('click', function() { 
     $(this).next().toggle(); 
    }); 
</script> 

ここでは、私がショー\隠す

<td class="title" > 
    <img src='@Url.Content("~/Images/plus_plus.png")' /> 
     <div class="content"> 
      <b>Test</b> 
     </div> 
</td> 

をNEDDブロックです

しかし、私はnothiをクリックしていますngが表示されます。

私の間違いはどこですか？

Update3と

私は解決策をfounв。ちょうどに基づいてスクリプトの前に@Scripts.Render("~/bundles/jquery")

Answer 1

、ここであなたが少なくとも持っている可能性がありjsFiddle

$('.title').on('click',function(){ 
    $(this).next().toggle(); 
}); 

Answer 2

これを記述する必要があります：あなたはjQueryのを使用している場合、それは非常に簡単ですsrc

.collapse{ 
 
    cursor: pointer; 
 
    display: block; 
 
    
 
} 
 
.collapse + input{ 
 
    display: none; /* hide the checkboxes */ 
 
} 
 
.collapse + input + div{ 
 
    display:none; 
 
} 
 
.collapse + input:checked + div{ 
 
    display:block; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      <label class="collapse" for="_1">+</label> 
 
      <input id="_1" type="checkbox"> 
 
      <div>Content 1</div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
      <label class="collapse" for="_2">+</label> 
 
      <input id="_2" type="checkbox"> 
 
      <div>Content 2</div> 
 
     </td> 
 
    </tr> 
 
</table>