Accordion Revert to Default Tab Text When Active Tab is Clicked

Question

I have an accordion that is functioning properly. I have the first tab open with .accordion-open as the active status and I also have my icon (minus) showing correctly via CSS. The text reads "HIDE" which is also correct. Since I have my navigation through out the accordion equipped with SHOW/HIDE AND PLUS/MINUS, if I click on the ACTIVE tab, I have it close the way it should, the MINUS changes to PLUS (which is also what I want), however the HIDE does not change back to SHOW.

In short, if someone closes the open tab (all tabs will be closed) I want that clicked tab's text to revert to SHOW.

I have also attached a fiddle. Thank you!

https://jsfiddle.net/EdgarAlexPoe/au7s346h/2/

 jQuery(document).ready(function($) { 
 $.fn.accordion = function() {
    const trigger = $(this).find('.accordion-trigger');
    const collapse = $(this).find('.accordion-collapse');

      $(trigger).first().addClass('accordion-open').find('span.showHide').html('HIDE');
    $(collapse).first().show();

    $(trigger).each(function(){
        $(this).on('click', function(){
            $(this).siblings('.accordion-collapse').slideToggle();
            $(this).toggleClass('accordion-open');
            $(this).parent().siblings('.accordion-item').find('.accordion-trigger').removeClass('accordion-open');
            $(this).parent().siblings('.accordion-item').find('.accordion-collapse').slideUp();
            $(this).find('span.showHide').html('HIDE');
            $(this).parent().siblings('.accordion-item').find('span.showHide').html('Show');

        });

    });
}
 $('.accordion').accordion();
 });

.accordion-item {
    margin: 0 0 1rem;
}

.accordion-item .accordion-trigger {
    color: #fff;
    background: #37847c;
    cursor: pointer;
    padding: 15px;
    position: relative;
    font-weight: 600;
    text-transform: uppercase;
}

.accordion-item .accordion-trigger span.teamTitlestyle {
    font-size: 24px;
    text-transform: capitalize;
    font-weight: 400;
}

.accordion-item .accordion-trigger:hover {
    background: #333;
}

.accordion-item .accordion-trigger:hover::before {
    color: #fff;
}

.accordion-item .accordion-trigger.accordion-open {
    background: #ccc;
}

.accordion-item .accordion-trigger .staff {
    float: right;
    margin: 3px;
}

.accordion-item .accordion-trigger .staff::after {
    font-family: 'Font Awesome 5 Free';
    content: "\f067";
    font-size: 20px;
    color: #fff;
    margin: 0 10px 0 10px;
}

.accordion-item .accordion-trigger.accordion-open .staff::after {
    content: "\f068";
    color: #fff;
}

.accordion-item .accordion-collapse {
    color: #000;
    display: none;
    padding: 15px;
    font-weight: 500;
}

.accordion-item .accordion-collapse .mainContent {
    display: inline-block;
    vertical-align: top;
    width: 67%;
}

.accordion-item .accordion-collapse .accordionSidebar {
    background: #f00;
    text-align: center;
    padding: 2rem;
    display: inline-block;
    width: 25%;
}

.accordion-item .accordion-collapse a {
    color: #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="container">
    <div class="accordion">
        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team One</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team TWO</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>

        <div class="accordion-item">
            <div class="accordion-trigger">
                <span class="teamTitlestyle">Team THREE</span>
                <div class="staff"><span class="showHide">Show</span>
                </div>
            </div>
            <div class="accordion-collapse">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Cras
                semper auctor neque vitae tempus quam pellentesque nec nam.
            </div>
        </div>
    </div>
</div>

Answer 1

As far as your code is concerned, I guess you need to do the following:

• Open the first element of accordion
• When clicking on accordion-item:
  • Its content is displayed, the text Show -> Hide and vice versa.
  • When accordion-item is clicked, all other elements will be closed.

Here is my suggestion:

To add events to an accordion-item element, you don't need to use $.each(). I changed your code like this:

jQuery(document).ready(function ($) {
    $.fn.accordion = function () {
        const trigger = $(this).find('.accordion-trigger');
        const collapse = $(this).find('.accordion-collapse');

        // show first accordion element
        $(trigger).first().addClass('accordion-open').find('span.showHide').html('HIDE');
        $(collapse).first().show();

        // add event click on all accordion item
        trigger.click(function () {
            const currentAccordionItem = $(this).parent()
            currentAccordionItem.find('.accordion-collapse').slideToggle();
            $(this).toggleClass('accordion-open');

            const isOpened = $(this).hasClass('accordion-open')
            $(this).find('.staff').html(isOpened ? 'Hide' : 'Show')

            // hide another accordion item
            const anotherAccordionItem = currentAccordionItem.parent().find('.accordion-item').not(currentAccordionItem)
            console.log(anotherAccordionItem);
            anotherAccordionItem.find('.accordion-trigger').removeClass('accordion-open')
            anotherAccordionItem.find('.accordion-trigger').find('.staff').html('Show')
            anotherAccordionItem.find('.accordion-collapse').slideUp()
        })
    }
    $('.accordion').accordion();
});

Full code here