Display One Hide And Show Section At a Time Using Jquery

Question

I'm trying to show and hide certain sections of a web page without showing or hiding other elements with similar names for example I want to be able to show a certain comments replies without displaing another comments replies that have the same class names. But I cant seem to get my jquery to work right. In-other words I want to click the a element with a class view-comments and display the closest section with a class name with more-comments

Here is my simplified HTML code.

HTML

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>


        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                .......
            </section>
        </article>

Jquery

    $(document).ready(function() {
      $('.view-comments').click(function() {
        $('.more-comments').toggle($(this).hasClass('view-comments'));
        $(this).toggleClass('view-comments hide-comments');
      });
    });

Answer 1

 $('.view-comments').click(function (e) {
     e.preventDefault();
     $(this).closest('article').find('.more-comments').toggle();
 });

demo

Try this way

Answer 2

To do this, I would make all of the elements that dont have the class active hidden by default. Then, when you click on a link (call prevent default to stop page navigation), remove the classactive from all of the more-comments sections, then add the class active to the closest more-comments section

$(document).ready(function() {
      $('.view-comments').click(function(e) {
        e.preventDefault();
        $('.more-comments').removeClass('active');
        $(this).closest('article').find('.more-comments').addClass('active');
      });
    });

.more-comments:not(.active){
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
            <div>
                <div>
                    ....
                    <a class="view-comments " title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments active">
                .......more-comments 1
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 2
            </section>
        </article>


        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 3
            </section>
        </article>

        <article>
            <div>
                <div>
                    ....
                    <a class="view-comments" title="" href="">View Comments</a>
                </div>
            </div>

            <section class="more-comments">
                ....... more-comments 4
            </section>
        </article>