div (ASP.NET MVC) anzeigen/verbergen

Question

Ich schreibe ASP.NET MVC Web App und habe Bildschirm wie folgt.

Screen

Ich brauche div zu zeigen und verstecken, wenn ich auf „+“ Taste

Als ich verstand ich, kann dies durch show() und hide() Methoden über JS tun.

Oder kann ich dies ohne JS tun, vielleicht können Sie mir Rat geben.

Hier Code dieses Blocks in View

<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

ich gefunden, wie dies zu tun, aber wenn ich versuche/zu verstecken Zeige alle Blöcke in Tabelle versteckt oder zeigt.

Wie wird dies nur für ein bestimmtes Element durchgeführt?

UPDATE2

Ich versuche @William Robinson Lösung und schreiben Code wie dieser

Hier Skript

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

Hier Block ist, dass ich nedd Show \ hide

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

Aber wenn ich nothi klicke ng zeigt.

Wo ist mein Fehler?

UPDATE3

I founв Lösung. Nur müssen diese @Scripts.Render("~/bundles/jquery")

Answer 1

Es ist ziemlich einfach, wenn Sie jQuery verwenden, hier ist ein jsFiddle

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

Answer 2

Basierend vor Skript schreiben auf: 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>