How can I make a button open a specific accordion tab in Pagefly?

[averynkh]

I have a button, currently i can only make it scroll to the accordion section

I wish to achieve to open a specific tab once it is clicked

how can i achieve it in Pagefly?

[Dan-From-Ryviu]

Could you share the page with that button?

[averynkh]

Hi Dan,

thanks for the reply!

this is the page where you can see the black button and actually another text link

https://www.hinomi.co/pages/warranty-extension-policy

i wish once they are clicked they can also auto open the second form below which creates a better experience but i am unable to achieve myself as i dont know coding 😅

[Dan-From-Ryviu]

What tab do you want it open? Claim or Extend? 

[averynkh]

Hi Dan,

it would be Extend form.

[Dan-From-Ryviu]

Please try to add this code to your theme.liquid file before </head> tag to check

<script>
  $(".pf-75_.btn-site-primary").on('click', function (event) {
    event.preventDefault();
    if ( $('.pf-accordion-wrapper').hasClass( "pf-accordion-show" ) ) {
    }else{
        $( ".pf-95_.pf-anchor").trigger( "click");
    }
  });
</script>

[averynkh]

HI Dan

i have added but it is not working @@

https://www.hinomi.co/pages/warranty-extension-policy

[Dan-From-Ryviu]

Please update that code to this version and check again 

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var button = document.querySelector('.pf-75_.btn-site-primary');
        var accordionWrapper = document.querySelector('.pf-accordion-wrapper');
        var anchor = document.querySelector('.pf-95_.pf-anchor');

        button.addEventListener('click', function (event) {
            event.preventDefault();
            
            if (!accordionWrapper.classList.contains('pf-accordion-show')) {
                anchor.click();
            }
        });
    });
</script>

[averynkh]

HI Dan,it is still not working 😅

i actually also tried to paste in the custom code in that page and also not working

[Dan-From-Ryviu]

Could I send collaborator request access to your store so I can help?

[Dan-From-Ryviu]

Or you can try to update code to this 

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
  $(".pf-75_.btn-site-primary").on('click', function (event) {
    event.preventDefault();
    if ( $('.pf-accordion-wrapper').hasClass( "pf-accordion-show" ) ) {
    }else{
        $( ".pf-95_.pf-anchor").trigger( "click");
    }
  });
</script>

[averynkh]

Hi Dan,

for now i used a cheating method which making this form as active tab in the beginning since this page is about warranty extension haha

[averynkh]

Hi Dan,

i cannot share the access with you haha i am not even the admin too and i dont think it will be allowed

hmmm i think it is fine if this is too tricky to achieve as my side is not so flexible 😞

[Dan-From-Ryviu]

Please try to update code to this and check again

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
  $(".pf-75_.btn-site-primary").on('click', function (event) {
    event.preventDefault();
    if ( $('.pf-accordion-wrapper').hasClass( "pf-accordion-show" ) ) {
    }else{
        $( ".pf-95_.pf-anchor").trigger( "click");
    }
  });
</script>

[PageFly-Richard]

Hi @averynkh ,
This is Richard from PageFly - Shopify Page Builder App.

Can you give me shotscreen about problem?

Best regards,
Richard | PageFly

[averynkh]

Hi Richard,

i have this page - https://www.hinomi.co/pages/warranty-extension-policy

on clicking these two links from the page

not only anchor link to the form in the bottom but also auto expand the second Extend warranty tab, is this possible to achieve?