Guidance needed on simple Ajax(?) update

layout

(Beginner alert)

I’m working on a website with a headless CMS and completely custom front end.

What I want to achieve is:

Load post list into frame as shown above via API.(I’m comfortable with this, although using php… Which may make things messy for what I want to achieve?)

Then, when a post title is clicked, another API call retrieves the body text for that post ID and displays it in the main body frame as shown in the picture, without page refreshes etc, maybe adding some CSS effect to transition in.

I’m not going to lie, I’ve never done any Java script (which is what I assume I’ll have to use?) and don’t know where to start…

Any assistance to get me going will be appreciated, I’m not necessarily asking for a full solution, just somewhere to start researching-I’ve seen about fetch and things, but it’s the using the click to get the id then making the reload happen in the other frame which is where I’m struggling

Thanks!

Haven’t tried anything yet as I’m unsure of even the method I should be using, is fetch even the right thing or is it something else?