title: How to create collapsable/dropdown/expandable partial view in ASP .NET MVC Web Application
body: <p>In <code>Details</code> action of <code>PersonController</code> I would like to show every information about the <code>Person</code> object. </p>
  
  <p>Initially I want only to show some info about the <code>Person</code> and rest will be collapsed, then I want to click a button/arrow/whatever and rest of info will expand.</p>
  
  <p>Before clicking button/arrow/whatever all the data was loaded but just hidden.  If I don't have to I don't want to use AJAX(I am not familiar with it). </p>
  
  <p>Drawings show what I mean.</p>
  
  <hr>
  
  <p><strong>BEFORE CLICK</strong> </p>
  
  <p><img src="https://i.stack.imgur.com/9j3sB.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>AFTER CLICK</strong></p>
  
  <p><img src="https://i.stack.imgur.com/XdFm2.png" alt="enter image description here"></p>
  
  <p>Right now <code>Details</code> view looks like that:</p>
  
  <pre><code>@model WebApplication2.Models.Person
  
  @{
      ViewBag.Title = "Details";
  }
  
  &lt;h2&gt;Details&lt;/h2&gt;
  
  &lt;div&gt;
      &lt;h4&gt;Person&lt;/h4&gt;
      &lt;hr /&gt;
      &lt;dl class="dl-horizontal"&gt;
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.FirstName)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.FirstName)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.LastName)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.LastName)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.CellNumber)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.CellNumber)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.SecondaryPhoneNumber)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.SecondaryPhoneNumber)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Address)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Address)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.BirthDate)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.BirthDate)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Pesel)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Pesel)
          &lt;/dd&gt;
  
          &lt;dt&gt;
              @Html.DisplayNameFor(model =&gt; model.Notes)
          &lt;/dt&gt;
  
          &lt;dd&gt;
              @Html.DisplayFor(model =&gt; model.Notes)
          &lt;/dd&gt;
      &lt;!-- SOMEWHERE HERE i WOULD LIKE TO INSERT THIS PARTIALL VIEW INTO EXPANDABLE COMPONENT --&gt;
      &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT:</strong> Pragnesh Khalas' original solution worked great but I wanted to pass whole <code>Person</code> object to partial view. So I modified script replacing:</p>
  
  <pre><code>  data: {
                  parentEls: '@Model.FirstName'
              }
  </code></pre>
  
  <p>with</p>
  
  <pre><code>data: {
                  person: '@Model'
              }
  </code></pre>
  
  <p>and in the controler:</p>
  
  <pre><code> [HttpPost]
          public ActionResult Test(Person person) {
              System.Diagnostics.Debug.WriteLine("PASSED: " + person);
              return PartialView(person);
          }
  </code></pre>
  
  <p>but <code>Person person</code> in the <code>Test</code> action is <code>null</code> besides that everything works. Why it(model) hasn't been passed?</p>
  
  <p>Full code:</p>
  
  <p>Script:</p>
  
  <pre><code>&lt;script&gt;
      function BtnOnclick() {
          $.ajax({
              type: 'POST',
              url: '@Url.Content("~/Person/Test")',
              data: {
                  person: '@Model'
              },
              success: function (data) {
                  $('#divpopup').css("display", "block");
                  $('#btnExpand').css("display", "none");
                  $('#divpopup')[0].innerHTML = data;
              }
          });
      }
      function CollapseDiv() {
          $('#divpopup').css("display", "none");
          $('#btnExpand').css("display", "block");
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>View:</p>
  
  <pre><code>&lt;p&gt;
      &lt;input type="button" value="Expand" id="btnExpand"
             onclick="javascript:BtnOnclick();" /&gt;
  &lt;/p&gt;
  &lt;div id="divpopup" style="display:none"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Controller's action:</p>
  
  <pre><code>        [HttpPost]
          public ActionResult Test(Person person) {
             // ViewBag.Chk = parentEls;
              System.Diagnostics.Debug.WriteLine("PASSED: ");
              System.Diagnostics.Debug.WriteLine(person.FirstName);
              return PartialView(person);
          }
      }
  </code></pre>
  
  <p>Partial view:</p>
  
  <pre><code>@model WebApplication2.Models.Person
  &lt;hr /&gt;
  &lt;h2&gt;Survey 1&lt;/h2&gt;
  
  &lt;input type="button" id="Coll" value="Collapse" onclick="javascript:CollapseDiv()" /&gt;
  &lt;dt&gt;
      @Html.DisplayNameFor(model =&gt; model.Notes)
  &lt;/dt&gt;
  &lt;dd&gt;
      @Html.DisplayFor(model =&gt; model.Notes)
  &lt;/dd&gt;
  &lt;hr /&gt;
  </code></pre>