List with inline details?

I have a list and in the detailform I also load 3 lists (read-only) in the footer of that form.
But, as I have the list in a module I the list and then the detailform so I have to scroll up and down to go to the next detail form.
I was thinking it would be great that the detailform opens 'inline' on the list. Sort of accordeon, when you click to see more, the line opens and shows the details directly under the dataline.
When I click another line the other details may (must) disapear, so only (max) 1 detail open at the same time.

Is this possible to accomplish this by adapting the template or some other easy way?
Please give some directions.

Many thanks in advance,

Filip

 

Yes, I know, but, as far as I know, that is not so mobile friendly. I had some complaints on another site with the popups.
Therefor I was thinking for this solution. But need some hints from the 'specialists' in what way I can do this, if it can be done at all...

greetings,
Filip

 

Guess you're not using the default "bootstrap" list template then as HTML tables are probably the least mobile-friendly element. Well, in a custom template you can do pretty much whatever you want. You just want to avoid nested <form> tags, of course.