Display content side by side and keep current page on one side when other clicked

I have a menu of portfolio pages listing their child items. On any portfolio page clicking on the item takes you to that item page. Clicking anywhere on the item page takes you back to the portfolio page. Works perfectly!

What I want to do is duplicate the content to display two lists / items at the same time independent of each other. I.e. Clicking on the menu displays a duplicate of the portfolio listing side by side in the content area and a user is able to click back and forth on either side without changing the displayed listing or item on the other side. Steep learning curve ahead for a noobie? Any guidance much appreciated.

Maybe @finanalyst can help. I know he is working on an editor that needs to display another page inside the editor page.

Responding to @pamtbaau's mail. I've just published the content-edit plugin. I had to transfer md and final html using AJAX to another element in the same page.

Not quite sure what you're looking for, but may be clues in my plugin.

Thanks for the suggestion guys. I figured out a method that is working nicely. 🙂 I parse the left and/or right side as a parameter in the link. If no parameter the list is displayed otherwise I use find page to display the parsed item.

{% set leftPage = uri.param("left") %}
{% set rightPage = uri.param("right") %}
<div class="left-frame">
    {% if leftPage %}
        {% include 'partials/item.html.twig' with {'side':'left'} %}
    {% else %}
        {% include 'partials/list.html.twig' with {'side':'left'} %}
    {% endif %}
</div>
<div class="right-frame">       
    {% if rightPage %}
        {% include 'partials/item.html.twig' with {'side':'right'} %}
    {% else %}
        {% include 'partials/list.html.twig' with {'side':'right'} %}
    {% endif %}
</div>