How to Retrieve Entry Content by Iterating Through the Nav Collection Tag?

[helidonashabani]

I'm facing a problem during the iteration of a collection with
I have a collection with articles and I want to get the content of the selected entry.
Example, when I click the parent URL I want to show all the content of its children.
How can I achieve this?

<div class="articles-container">
    <nav class="articles-sidebar">
        <h2>Table of contents</h2>
        <ul>
            {{ nav:collection:articles }}
            <li ><a href="#{{ uri }}">{{ title }}</a></li>
            
            {{ if children }}
             <ul>{{ *recursive children* }}</ul> 
            {{ /if }}
            {{ /nav:collection:articles }}
        </ul>
    </nav>
    <div class="articles-content">
            <p>The content that will display upon clicking the selected article</p>
                  {{ collection:articles }}
                            <h1> {{ title }} </h1>
                             <p> {{ description }} </p>
                             <img src="{{ image:url }}" alt="{{ image:alt }}">
                 {{ /collection:articles }}
    </div>
</div>