html - How to show collections page list in second div, when click on collection name in first div ? (JEKYLL)

Question

I am new to jekyll and have beginner experience in js. [Jekyll version: 4.2.0]

I have left navigation pane, center content, and right navigation pane.
on left nav I want to show the title of each collection, and when user clicks on it, right nav should show title of each page of that collection.

I'm able to show each collection's name in left nav with following code:

<div class="left_sidebar">
        {% for coll in site.collections %}
        {% if coll.label != "posts" %}
        <a href="{{ coll.docs[0] | relative_url }}" class="col_link" >{{ coll.title }}</a>
        {% endif %}
        {% endfor %}
</div>
<div class="main">{{ content }} </div>
<div class="right_sidebar"></div>

but I'm not able to find a way to populate right navigation. Page should look something like this: site_mockup

I tried scripting a bit but no luck so far:

<script>
    $(function() { 
        $( '.col_link' ).on( 'click', function() { 
            $('.right_sidebar').load('{% include data.html %} #items');
        });
    });
</script>

_includes/data.html:

{% assign curr_coll = page.collection %}
{% for page in curr_coll.docs %}
    <a href="{{ page | relative_url }}" id="items">{{ page.title }}</a>
{% endfor %}

Answer 1

等待大神答复