Toggle close all except one clicked

Question

I'm trying to get this toggle to work correctly, the problem I have is if I click the link it shows open if I go to the next section and click the link then that shows open, so I have two texts that show open when it should only be the one clicked.

I have looked at Toggle/close all other divs when one is clicked and a few other posts but cannot seem to get it to work.

As you can see in the code block, the text toggles from open/close, but you can end up with them all saying open.

$(document).ready(function () {
    $('.hidden').removeClass('hidden').hide();
    $('.accordian-toggle').click(function (e) {
    e.preventDefault();
        $(this).find('span').each(function () { $(this).toggle(); });
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <section id="process">
        <div class="container">
            <div class="row">
                <div class="col text-center">
                    <div class="inline-block-container">
                        <h1 class="text-center text-md-left">Process<br></h1>
                        <hr class="header-underline">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-6">
                    <article class="text-center">
                        <header></header>
                        <section></section>
                    </article>
                    <p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-6">
                    <article class="text-center">
                        <header></header>
                        <section></section>
                    </article>
                    <div role="tablist" id="accordion-1">
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="true" aria-controls="accordion-1 .item-1" href="div#accordion-1 .item-1" class="accordian-toggle">
                               <span class="hidden"><i class="fas fa-door-open i-margin">OPen</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse show item-1" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-2" href="div#accordion-1 .item-2" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">OPen</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-2" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-3" href="div#accordion-1 .item-3" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">Opne</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-3" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text">Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" role="tab">
                                <h5 class="mb-0"><a data-toggle="collapse" aria-expanded="false" aria-controls="accordion-1 .item-4" href="div#accordion-1 .item-4" class="accordian-toggle"><span class="hidden"><i class="fas fa-door-open i-margin">Open</i></span><span><i class="fas fa-door-closed i-margin">Close</i></span></a></h5>
                            </div>
                            <div class="collapse item-4" role="tabpanel" data-parent="#accordion-1">
                                <div class="card-body">
                                    <p class="card-text"Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer 1

Please find working jquery code for your accordion.

<script type="text/javascript">
$(function() {
    $('.hidden').removeClass('hidden').hide();
    $('.accordian-toggle').click(function (e) {
    e.preventDefault();
    var closedEl;
    var openEl; 
    $('.card').each(function(){
        openEl = $(this).find('.accordian-toggle').find('span').find('i.fa-door-open');
        closedEl = $(this).find('.accordian-toggle').find('span').find('i.fa-door-closed');
        $(closedEl).parent('span').show();
        $(openEl).parent('span').hide();
    });
    $(this).find('span').find('i.fa-door-open').parent('span').show();
    $(this).find('span').find('i.fa-door-closed').parent('span').hide();
    });
})
</script>