Now my previous html structure is more responsive. Which means that on smaller screens the detail section is opened over Master. This rises the question what icon to use for making it clear how you can go back to Master.
I mean, it sort of depends I think on what is going to eventually be on the “Master” section.
Is Master going to be a list of things? If so, that icon might be sufficient as is. Like if Master is going to be a UL with a bunch of stuff, and the Detail won’t, the icon represents Master accurately. It’s more about association than a definitive “use this”.
It would be easier to offer advice if your working example showed real sample data.
As it stands, l found it quite confusing, because the two pages look very similar, but require clicking/tapping in different areas. That might not be an issue with the “real” page, but I can’t tell from what you’ve posted.
As @TechnoBear said that’s very confusing and I just couldn’t work out where I was at all (and you only have two items).
Especially when I resize my window (as I do all the time) then Details suddenly disappear!! Where’s it gone? I’m sure it was there? maybe it’s at the bottom, or in the hamburger as usual happens? How many elements do I need click to find it. Sorry, I’m off somewhere else now as you made me look silly
Instead I would change the smaller screen to a ‘tab type’ design so that you have the two links on the top and the current one highlighted and therefore no ambiguity.
(icon) Master (icon) Detail
You could even then color code panels and tabs to match or anything similar.