Link to specific accordion on different page

Support
#1

Hi,

I am trying to achieve something similar to the solution on this thread:

But instead of the link going to a tab I want to link to an accordion.

Is this possible?

Many thanks,

#2

Hi There,

You can add an ID to the row where the accordion is placed and link to it.

example.com/page/#id

Hope it helps

#3

Thats great thanks.

Although it seems to just link to the page and not scroll to the related accordion.
Is there a way to achieve this, or even better still, have the related accordion in question expand so the content is visible when clicked through from it’s related link?

Thanks again

#4

Hello There,

Thanks for writing in!

You can do the following:
1.) please make sure the link as Joao has suggested:
example.com/page/#id

2.) And then please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

(function($){
  var pageAddress = window.location.hash;

  if ( pageAddress || pageAddress != '' ) {

    console.log(pageAddress);

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $(pageAddress).offset().top - 160;
    console.log($(pageAddress).offset().top);
    console.log('tab: ' + pageAddress + ', yloc: ' + yloc);
    
    $('.x-accordion-toggle[href^="' + pageAddress + '"').trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  }
  
})(jQuery);

If that doesn’t work, please provide the url of the page in question so that we can take a closer look.
Hope this helps. Please let us know how it goes.

#5

Hi,

Thanks for getting back to me.

Unfortunatly this did not work.
It looks as if the link takes me to the correct section on the new page as it scrolls down, but the related accordion doesn’t open.

Here’s the homepage:
http://socialmediasumo.co.uk

The links in question are the icons under ‘The Profinest Production Process’ block.

The icons should take you to this page where the accordions are:
http://socialmediasumo.co.uk/production-process

Thanks again for the support.

#6

Hi there,

It’s not going work since the accordion isn’t href based (eg. #id). Instead, please change that to this

(function($){
  
var accordion_hash = window.location.hash.split('-');



if ( accordion_hash[0] !== '#accordion' && ( accordion_hash[1] == '' || accordion_hash[1] == undefined ) ) return false;

   var accordionElement = $('.x-accordion-heading').eq( accordion_hash[1] ).find('.x-accordion-toggle');

console.log( accordionElement );

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $( accordionElement ).offset().top - 160;

    $( accordionElement ).trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  
  
})(jQuery);

Now, when linking, you should always use this format

http://socialmediasumo.co.uk/production-process/#accordion-1
http://socialmediasumo.co.uk/production-process/#accordion-2
http://socialmediasumo.co.uk/production-process/#accordion-3

And so on :slight_smile:

The #accordion identify that you’re targeting the accordion, while the numbers are the index or the specific accordion item that you wish to toggled on.

Thanks!

#7

Hi,

Please forgive me if i’m missing the obvious but this did not work for me.

Regards,

#8

Hi,

It seems to work when I add it via console.

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#9

Hi,

Please find your login credentials below.

Login link: http://socialmediasumo.co.uk/wp-login.php

Thank you

#10

Hi there,

It should be okay now, I changed it to this

jQuery ( document ).ready( function($){
  
var accordion_hash = window.location.hash.split('-');

if ( accordion_hash[0] !== '#accordion' && ( accordion_hash[1] == '' || accordion_hash[1] == undefined ) ) return false;

   var accordionElement = $('.x-accordion-heading').eq( accordion_hash[1] ).find('.x-accordion-toggle');

console.log( accordionElement );

    var navbar = $('.x-navbar').outerHeight();
    var yloc = $( accordionElement ).offset().top - 160;

    $( accordionElement ).trigger('click');

    $('html, body').animate({
        scrollTop: yloc
      }, 850, 'easeInOutExpo');
  
  
});

Please note that the element counting start with 0, so http://socialmediasumo.co.uk/production-process/#accordion-0 is the first one.

Thanks!

#11

That’s perfect!
Exactly what I was after.

Many thanks for the excellent support.

#12

You’re welcome! :slight_smile:

#13

I’m trying to link to an accordion on the same page:

-link a menu item to an Accordion element, and have a specific accordion open up once the menu item link is clicked.

Please help with the latest code??

(cornerstone, X theme)

#14

Hi @Easyads88,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#15

attached is login info

#16

Hi there,

Sorry for this please kindly change your username and password as the Secure Note is visible to the Original Poster of this thread.

I answered a separate thread regarding this please kindly check that and do your follow up there.

Thank you.

#17

Hi there,

Please refer to the other thread you have posted.

Thank you.

#18

Hi,

I am trying to achive the same thing, link to an accordion tab on the same page with automatic open. I have tried the solutions in this post with no luck.

The url is https://www.riosa.com/documentacion/

I am using PRO latest version.

#19

Hi Hugo,

This thread is a 1-year-old one, and many things are changed, also we need to check your case and for the sake of clarity and avoid confusion, I urge you to open up a separate thread and give the details of the case on your website, and we will be more than happy to follow up.

Thank you.