[recursivedoubts]

The htmx way to do this would be something like this (assuming a contact model per row):

The summary rows would handle a click to load the detail HTML for the contact, and replace the entire row

  <div hx-get="/contact/42/details" hx-swap="outerHTML" ...>
     ...
  </div>

The detail rows would handle a click to load the summary HTML for the contact, and replace the entire row

  <div hx-get="/contact/42/summary" hx-swap="outerHTML" ...>
     ...
  </div>

So you would flip the row back and forth between summary and detail views. This would involve two templates server side, which seems about right, and would place the logic inside separate and fairly simple server side logic.

Note that here the URLs are encoding the row state, so we are using Hypertext As The Engine of Application State (HATEOAS) without thinking too hard about it.