SHARE
TWEET

very simple accordion on table

stefanMinch3v Jun 28th, 2019 94 in 285 days
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @model List<TestViewModel>
  2.  
  3. @{
  4.     ViewData["Title"] = "Home Page";
  5. }
  6.  
  7. <div class="text-center">
  8.     <h1 class="display-4">Welcome</h1>
  9.     <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
  10. </div>
  11.  
  12. <table class="table table-hover">
  13.     <thead>
  14.         <tr>
  15.             <th>Company name</th>
  16.         </tr>
  17.     </thead>
  18.     @foreach (var item in Model)
  19.     {
  20.         <tbody>
  21.             <tr class="break-row" style="background-color: #eee;">
  22.                 <td  class="col-sm-10">
  23.                     @item.Header
  24.                     @if (item.Data.Count > 0)
  25.                     {
  26.                         <button class="btn-sm btn-primary guests-btn" style="cursor: pointer">Show guests</button>
  27.                     }
  28.                 </td>
  29.                 <td class="col-sm-2"><button>Download</button></td>
  30.             </tr>
  31.             @foreach (var guest in item.Data)
  32.             {
  33.                 <tr>
  34.                     <td style="padding-left: 2em" class="col-sm-10">@guest</td>
  35.                     <td class="col-sm-2"><button>Download</button></td>
  36.                 </tr>
  37.             }
  38.         </tbody>
  39.     }
  40. </table>
  41.  
  42. @section Scripts {
  43.     <script defer>
  44.         $('.break-row').nextUntil('tr.break-row').hide();
  45.  
  46.         $('.guests-btn').on('click', function () {
  47.             const btn = $(this);
  48.             const btnWarning = 'btn-warning';
  49.             const btnPrimary = 'btn-primary';
  50.  
  51.             if (btn.text().toLowerCase() === 'show guests') {
  52.                 btn.text('Hide guests').removeClass(btnPrimary).addClass(btnWarning);
  53.             } else {
  54.                 btn.text('Show guests').removeClass(btnWarning).addClass(btnPrimary);
  55.             }
  56.  
  57.             btn.parent().parent().nextUntil('tr.break-row').toggle(300, 'linear');
  58.         });
  59.     </script>
  60. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top