anchor link open specific accordion tab

averynkh
New Member
14 0 0

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?

Replies 15 (15)

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

Could you share the page with that button?

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

averynkh
New Member
14 0 0

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
Shopify Partner
7011 1326 1352

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

averynkh
New Member
14 0 0

Hi Dan,

it would be Extend form.

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

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>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

averynkh
New Member
14 0 0

HI Dan

i have added but it is not working @@

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

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

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>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

averynkh
New Member
14 0 0

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
Shopify Partner
7011 1326 1352

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

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Dan-From-Ryviu
Shopify Partner
7011 1326 1352

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>

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

averynkh
New Member
14 0 0

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
New Member
14 0 0

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
Shopify Partner
7011 1326 1352

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>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Richard
Shopify Partner
4079 913 1566

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

Can you give me shotscreen about problem?


Best regards,
Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

averynkh
New Member
14 0 0

Hi Richard,

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

on clicking these two links from the page

Screenshot 2024-01-09 at 16.44.46.pngScreenshot 2024-01-09 at 16.44.41.png

 

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