Accordion Revert to Default Tab Text When Active Tab is Clicked-CodePudding

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<div >
    <div >
        <div >
            <div >
                <span >Team One</span>
                <div ><span >Show</span>
                </div>
            </div>
            <div >
                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 >
                <span >Team TWO</span>
                <div ><span >Show</span>
                </div>
            </div>
            <div >
                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 >
                <span >Team THREE</span>
                <div ><span >Show</span>
                </div>
            </div>
            <div >
                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>

CodePudding user response：

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:

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

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

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

Full code here