Tab is not working

Thanks for reaching out. Custom JavaScript has som restrictions in AMP URLs for performance reasons, which is why the tabbed content you created won’t work by default. Try the below and it should work in both AMP and non AMP URLs. It makes use of the amp-selector component and you can test it (without the styling) by copying and pasting into the amp-selector playground (body section):

<amp-selector class="tabs-with-selector" role="tablist" on="select:myTabPanels.toggle(index=event.targetOption, value=true)" keyboard-select-mode="focus">
        <ul>
      <li><a on="tap:myTabPanels.toggle(index=0, value=true)" href="#uagb-tabs__tab0" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="0" aria-selected="false"><span>Jeane D. Dobson</span></a></li>
      <li><a on="tap:myTabPanels.toggle(index=1, value=true)" href="#uagb-tabs__tab1" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="1" aria-selected="true"><span>Daniel C. Curtis</span></a></li>
        <li><a on="tap:myTabPanels.toggle(index=2, value=true)" href="#uagb-tabs__tab2" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="2" aria-selected="true"><span>Tam L. Anderson</span></a></li>
      </ul>
      </amp-selector>

  
    <div class="uagb-tabs__body-wrap">
      <amp-selector id="myTabPanels" class="tabpanels">
        <div id="sample3-tabpanel1" role="tabpanel" aria-labelledby="sample3-tab1" option selected><div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-tabs__inner-tab uagb-inner-tab-0" aria-hidden="true"><div class="uagb-blocks__25094998 uagb-tabs__body" aria-labelledby="uagb-tabs__tab0"><div>
    <div class="ub_testimonial" id="ub_testimonial_bdf8f4e1-79bf-42f9-ae4e-3b42506ef6b4">
        <div class="ub_testimonial_img">
            <img loading="lazy" src="https://biddrup.com/wp-content/uploads/2021/03/Jeane-D.-Dobson-feedbcks-on-sendloop-email-marketing-tools.png" alt="Jeane D. Dobson feedbcks on sendloop email marketing tools" height="100" width="100">
        </div>
        <div class="ub_testimonial_content">
            <p class="ub_testimonial_text">Jeane has been using Sendloop for a number of years, her small company is always looking to expand and she figures this would be the perfect solution. She talks about how easy it was to just set up an account with one login and she’s not sure why anyone would need more than that. The only downside seems to be that as they improve the software new features can sometimes show inconsistencies in old areas but Jeane doesn’t seem too concerned about that as long as she can keep track of all of her clients under one login.</p>
        </div>
        <div class="ub_testimonial_sign">
            <p class="ub_testimonial_author"><em>Jeane D. Dobson</em></p>
            <p class="ub_testimonial_author_role">SendLoop User</p>
        </div>
    </div>
</div></div></div></div>
        <div id="sample3-tabpanel2" role="tabpanel" aria-labelledby="sample3-tab2" option><div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-tabs__inner-tab uagb-inner-tab-1" aria-hidden="false"><div class="uagb-blocks__8cdad308 uagb-tabs__body" aria-labelledby="uagb-tabs__tab1"><div>
    <div class="ub_testimonial" id="ub_testimonial_f8d28ca0-f043-407c-b38e-268162af01e3">
        <div class="ub_testimonial_img">
            <img loading="lazy" src="https://biddrup.com/wp-content/uploads/2021/03/Daniel-C.-Curtis-sendloop-email-marketing-tools-user.png" alt="Daniel C. Curtis sendloop email marketing tools user" height="100" width="100">
        </div>
        <div class="ub_testimonial_content">
            <p class="ub_testimonial_text">I am a VP of marketing for a religious institution and I use SendLoop email software to send out our message. It’s easy to use, works well as an email marketing program, has a functional interface and sends out my content without fail. However the app has some annoying issues with logging you out involuntarily after being inactive for awhile. When this happens it always logs me off in the middle of sending an important message to one of our followers!</p>
        </div>
        <div class="ub_testimonial_sign">
            <p class="ub_testimonial_author"><em>Daniel C. Curtis</em></p>
            <p class="ub_testimonial_author_role">SendLoop User</p>
        </div>
    </div>
</div></div></div></div>
        <div id="sample3-tabpanel3" role="tabpanel" aria-labelledby="sample3-tab3" option><div class="wp-block-uagb-tabs-child uagb-tabs__body-container uagb-tabs__inner-tab uagb-inner-tab-2" aria-hidden="false"><div class="uagb-blocks__14c15856 uagb-tabs__body" aria-labelledby="uagb-tabs__tab2"><div>
    <div class="ub_testimonial" id="ub_testimonial_a4bb1c2a-77a3-4b07-8d78-2a70474efa37">
        <div class="ub_testimonial_img">
            <img loading="lazy" src="https://biddrup.com/wp-content/uploads/2021/03/Tam-L.-Anderson-seendloop-email-marketing-tool-user.png" alt="Tam L. Anderson seendloop email marketing tool user" height="100" width="100">
        </div>
        <div class="ub_testimonial_content">
            <p class="ub_testimonial_text">I’ve used SendLoop for a few years now and I have to say, while the features are great, it can be hard to use. They’re constantly making updates which is good because it’s always getting better but when there are inconsistencies in the user interface then you have to dig around. But once you get into the swing of things and figure out what they want – it’s great!</p>
        </div>
        <div class="ub_testimonial_sign">
            <p class="ub_testimonial_author">Tam L. Anderson</p>
            <p class="ub_testimonial_author_role">SendLoop User</p>
        </div>
    </div>
</div></div></div></div>
      </amp-selector>
    </div>

Out of curiosity can you confirm you used the “Ultimate Addons for Gutenburg” plugin to create this tabbed list?

@jamesosborne thank you so much for your prompt response. I will try and get back to you. BTW, how can I implement this to multiple pages? thank you again

Not a problem. If you’re using the default WordPress editor you could save that block as a reusable block and reuse it elsewhere – just be sure to convert it to a regular block each time after adding the reusable block (if you wish to made modifications elsewhere).

There may be some compatible blocks plugins that also have tab based functionality.

I also noticed you’re using the Astra theme, which is fully AMP compatible. Have you tried switching to transitional mode as opposed to using reader mode, with reader mode most suitable for themes that are not AMP compatible?

@jamesosborne Thank you so much! I’m a web developer and I work for fixing this issue.
Here the main problem is AMP removing the tab li ID (uagb-tabs__tab1, uagb-tabs__tab2) , which has caused problems with our tabs not working properly. Please check my below code here:

Non AMP Code:

<ul class="uagb-tabs__panel uagb-tabs__align-left">
    <li class="uagb-tab uagb-tabs__active"><a href="#uagb-tabs__tab0" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="0" aria-selected="true"><span>Jeane D. Dobson</span></a></li>
    <li class="uagb-tab " id="uagb-tabs__tab1"><a href="#uagb-tabs__tab1" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="1" aria-selected="false"><span>Daniel C. Curtis</span></a></li>
    <li class="uagb-tab " id="uagb-tabs__tab2"><a href="#uagb-tabs__tab2" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="2" aria-selected="false"><span>Tam L. Anderson</span></a></li>
</ul>

Amp Code:

<ul class="uagb-tabs__panel uagb-tabs__align-left">
    <li class="uagb-tab uagb-tabs__active"><a href="#uagb-tabs__tab0" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="0"><span>Jeane D. Dobson</span></a></li>
    <li class="uagb-tab "><a href="#uagb-tabs__tab1" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="1"><span>Daniel C. Curtis</span></a></li>
    <li class="uagb-tab "><a href="#uagb-tabs__tab2" class="uagb-tabs-list uagb-tabs__icon-position-left" data-tab="2"><span>Tam L. Anderson</span></a></li>
</ul>

Thanks for the update. The AMP plugin doesn’t remove ID’s, most likely the plugin in use adds IDs using custom JavaScript, which is restricted in AMP to amp-script and other components.

While the issue isn’t specific to the AMP plugin did you try using the amp-selector component or testing out your functionality using the AMP playground?

@biswajitadhikary @biddrup As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!