Show/hide div (ASP.NET MVC)

Question

I'm writing ASP.NET MVC web app and have screen like this.

Screen

I need to show and hide div when I click "+" button

As I understood I can do this via JS by show() and hide() methods.

Or can I do this without JS, maybe you can give me advice.

Here is code of this block 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

I Found how to do this, but when I try to hide/show all blocks in table hiding or showing.

How to do this for only one specific element ?

UPDATE2

I try @William Robinson solution and write code like this

Here is script

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

Here is block that I nedd show\\hide

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

But when I'm clicking nothing is showing.

Where is my mistake?

UPDATE3

I founв solution. Just need to write this before script @Scripts.Render("~/bundles/jquery")

Answer 1

It's pretty simple if you're using jQuery, here's a jsFiddle

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

Answer 2

Based on: 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>