Show/hide div (ASP.NET MVC)

Question

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

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")

score 2 · Accepted Answer · answered Feb 25 '17 at 22:42

2

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

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

answered Feb 25 '17 at 22:42

William Robinson

307
2
13

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

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>

edited May 23 '17 at 11:46

Community

1
1

answered Feb 25 '17 at 22:24

Mroczny Arturek

419
1
8
22

1

You could have at least credited the OP of your solution http://stackoverflow.com/questions/19170781/show-hide-divs-on-click-in-html-and-css-without-jquery – William Robinson Feb 25 '17 at 22:27
okay. if I have 24 records in my database table, I need to hardcode 24 id's? – Feb 25 '17 at 22:27
It would be easier to use a JS function if you have that many. You mentioned show() and hide() so I take it you are using jQuery? – William Robinson Feb 25 '17 at 22:31

Show/hide div (ASP.NET MVC)

2 Answers2