title: Panel Expansion and Button Appear Per Table Row - MVC 5/Bootstrap 3
body: <p>I have been learning and playing with both MVC and Bootstrap and now I am wanting to take on a new challenge in order to make my dummy site more flexible and less congested. To do this I want to implement two more features on my display tables but I am unsure how I should go about this.</p>
  
  <ul>
  <li><p>The first feature is to make all my buttons hidden, except for when my mouse is on the table's respective row. 
  <strong>i.e.</strong> As I move my mouse down the table, each row's buttons will briefly appear while the mouse is over their row.</p></li>
  <li><p>The second feature is that I also want to be able to expand each row to display additional information <strong>i.e.</strong> Right now my table shows data for movie name, actor, role, and release date. When I click on a row, I want it to slightly expand down to show all the additional information I have, such as movie description, rating, ect...</p></li>
  </ul>
  
  <p>Here is my current page online.</p>
  
  <p><img src="https://i.stack.imgur.com/WI47a.png" alt="enter image description here"></p>
  
  <p>Here is my View code.</p>
  
  <pre><code>@model IEnumerable&lt;WebApplication2.ViewModels.Starring.StarringViewModel&gt;
  
  @{
      ViewBag.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;div class="panel panel-primary" style="width:100%"&gt;
      &lt;div class="panel-heading"&gt;
          &lt;span style="font-size: 30px; font-style:oblique"&gt;&lt;span style="font-size:larger;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-star"&gt;&lt;/span&gt;Starring&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
  
              &lt;button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"&gt;&lt;span style="font-size:larger;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;Add New Movie&lt;/span&gt;&lt;/button&gt;
              &lt;button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Employee")' ;return false;"&gt;&lt;span style="font-size:larger;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;Add New Employee&lt;/span&gt;&lt;/button&gt;
              &lt;button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Show")' ;return false;"&gt;&lt;span style="font-size:larger;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;Add New Showing&lt;/span&gt;&lt;/button&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table class="table table-striped table-hover table-responsive table-condensed"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  &lt;h3 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;Movie Name&lt;/span&gt;&lt;/h3&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;h3 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;Release Date&lt;/span&gt;&lt;/h3&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;h3 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;Actor&lt;/span&gt;&lt;/h3&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;h3 style="font-size:x-large"&gt;&lt;span style="font-weight:bolder"&gt;@Html.DisplayNameFor(model =&gt; model.Role)&lt;/span&gt;&lt;/h3&gt;
              &lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
          @foreach (var item in Model)
          {
              &lt;tr&gt;
                  &lt;td class="col-lg-2"&gt;
                      &lt;span style="font-size: 17px;"&gt;@Html.DisplayFor(modelItem =&gt; item.movieName)&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="col-lg-2"&gt;
                      &lt;span style="font-size: 17px;"&gt;@Html.DisplayFor(modelItem =&gt; item.movieReleaseDate)&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="col-lg-1"&gt;
                      &lt;span style="font-size: 17px;"&gt;@Html.DisplayFor(modelItem =&gt; item.employeeName)&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="col-lg-1"&gt;
                      &lt;span style="font-size: 17px;"&gt;@Html.DisplayFor(modelItem =&gt; item.Role)&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td class="col-lg-3"&gt;
                      &lt;button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;Edit&lt;/button&gt;
  
                      &lt;button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"&gt;&lt;/span&gt;Details&lt;/button&gt;
  
                      &lt;button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"&gt;&lt;span style="margin-right: 5px" class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;Delete&lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my ViewModel. (<em>Which has some extra information that I would like to display upon a row being clicked</em>)</p>
  
  <pre><code>namespace WebApplication2.ViewModels.Starring
  {
      public class StarringViewModel
      {
          public int movieID { get; set; }
          public int roleID { get; set; }
          public int employeeID { get; set; }
          public string movieName { get; set; }
          public string movieDescription { get; set; }
          public DateTime? movieReleaseDate { get; set; }
          public string Role { get; set; }
          public string employeeName { get; set; }
          public DateTime employeeBirthdate { get; set; }
      }
  }
  </code></pre>
  
  <p>Thank you!</p>