Link to and OPEN an accordion on the SAME page

Support
#1

Hi I’m trying to link a custom menu to an accordion on the same page, and cause it to open a specific accordion once you click the menu item.

Please advise??..

#2

Hi there,

Our theme and the Accordion element does not have this feature out of the box and this is considered a customization request. We will do our best to show you how you can do that using the Javascript code but the implementation and maintaining of the code will be on your shoulders.

Please go to the Appearance > Menus and from top right section of the screen click on Screen Options and enable the CSS Classes and Title Attibute options.

Then please go to the menu item that you want to link to the accordion and add the information below:

#thetarget -> This section is the name of ID which you will add to the Accordion. You just need to prepend the # t the ID so in this case, the ID was theTarget so the link will be #theTarget

theaccordion -> Add this to the CSS Classes option to identify this menu item to be the accordion trigger.

2 -> Add the position of the Accordion item you want to open in the Title Attribute option. We added 2 in this case which shows we want the second accordion item to be opened by clicking on this menu item.

The next step is to go to the Page in question and add a Classic Accordion element to the Cornerstone and set it as you want. The only extra thing you need to do is to add an ID for the whole accordion. In our case the ID name will be theTarget:

Finally, go to X > Launch > Options > JS and add the script below:

jQuery('.x-navbar .theaccordion a').on('click', function() {
	var theLocation = jQuery(this).attr('title');
	var theTarget = jQuery(this).attr('href');
	setTimeout(function(){
		jQuery(theTarget).find('.x-accordion-group:nth-child(' + theLocation + ') .x-accordion-toggle').trigger('click');
	}, 600);
});

That should do the trick. Thank you.

#3

Hi Christopher,
I followed all your steps, line for line, but unfortunately it is still not working. Please advise

#4

Use the anchor #customname on menu
All you need: setting the accordion with a anchor name id and use the same name: customname

#5

Thanks, but I’ve done that, but still not working.

#6

Hello There,

Christopher’s suggestion will only work with the default menu. It is not working for you because you are using SuperFly menu. And I also noticed that you only have one accordion item for each row. Therefore in order to resolve this issue, please add an ID for each of your accordion element. The #theman as the target should be the ID of the accordion element like this:

And you’ll need to replace the JS code by using this this instead:

(function($){
  $('.sfm-menu a').each(function(){
    $(this).on('click', function() {
      var theTarget = jQuery(this).attr('href');
      setTimeout(function(){
        jQuery(theTarget).find('.x-accordion-toggle').trigger('click');
      }, 600);
      console.log('clicked!');
    });
  });
})(jQuery);

Please let us know how it goes.

#7

I tried what you suggested RueNel, but it is still not working. I even took the liberty of renaming the CSS Classes on the menu to “sfm-menu”, but it still didn’t work. I also rename the target to both the ROW, and the ELEMENT, but still no response. Please advise…

#8

Hi,

You need to add your id to your row element instead of your headline element.

I went ahead and added one to your themedia row so you can check how it works.

Thanks

#9

I’m not sure what you’re speaking of Paul, but when I click The Media from the menu the accordion is still not opening.

Please, someone, advise???

#10

HI there,

It only links where the ID is, it will not open an accordion since it’s not aware of which accordion should it open. May I know which accordion should open when it’s clicked? I may able to alter the JS code.

And please add an ID to each of your accordion item :slight_smile:

Thanks!

#11

Hi Rad,
I don’t understand… what should I do?

#12

Hello There,

I have edited your page and moved the ID. I have added theman ID to the row container of the accordion element.
Please check this out:

Please let us know how it goes.

#13

RueNel,
When I click THE MAN, it goes to the accordion, but the accordion itself STILL DOESNT OPEN. Someone please advise!!??!??!!!

#14

Hi there,

I checked and it does open an accordion, and it’s the video accordion. Perhaps you can provide information of which accordion should open?

Thanks!

#15

When I click the menu item labeled “The Man” it does not open an accordion. Please tell me if Im doing something wrong… I really need this to work.

#16

Hi there,

Yes, but which accordion? Here is a video on my end and you’ll see it opens from my end

Thanks!

#17

I’m trying to make the menu item labeled “Booking” to open the last accordion on the page labeled “Book Now”.

By the way, your video link would not pull up for me either.

Thanks

#18

Hello There,

Thanks for writing in! I’ve checked your site in different browsers. The menu items “The Man” and the “Booking” will now open the accordion items. You may not be seeing that it works because of your browser cache. Please clear your browser cache or use private browsing mode and test your site again.

Please let us know how it goes.

#19

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.