Ingo Holder » How to open an Avada accordion with a link

Update 20.12.2019 After I helped someone implement my script into his website I found some issues with it. For instance it was meant to open links when you're switching pages and want to directly open an accordion. However the script was lacking functionality when someone had a link and an accordion on the same page. The other accordions didn't close. So there is a need for some quality of life improvements. This article has been updated accordingly and is using the latest version! Recently I encountered an issue on a Clients Website that used the Wordpress Theme Avada. The Theme has an accordion / toggle feature built-in.The client wanted to be able to open a tab by clicking a link. By default that's not possible. Therefore I had to come around some workaround to help myself. With the following Code, you can link to an accordion element. Then open and finally scroll to it. If you want to know what exactly happens with this code step by step scroll down! If you don't care and just want the finished Code and try if it works for you then here you go.

Code:

<script>

jQuery(document).ready(function() {
	if(jQuery('.fusion-accordian').length){
		// --- Change this to your selector, this is meant to be the wrapper
		var yourLinkWrap = '.yourwrapper .fusion-row > div'; 
		// ----
		
		// --- Start: Set data-openlink for each accordion item
		jQuery('.fusion-accordian.accordian .fusion-panel').each(function(){
			var tmp = jQuery(this).find('.fusion-toggle-heading').text();
			jQuery(this).find('a').attr('data-openlink', tmp.split(' ')[0].toLowerCase());
		});
		// --- End
		
		// If the URL contains a link to our accordion / coming from a differnt page
		if(location.href.indexOf('#') > -1){
			var target = location.href.split("#").slice(-1)[0];
			jQuery('a[data-openlink="' + target + '"]').click();
			jQuery('a[data-openlink="' + target + '"]').toggleClass('active');
            jQuery('html,body').animate({scrollTop: jQuery('a[data-openlink="' + target + '"]').offset().top - (jQuery('.fusion-header').height() + 25)},500,'swing'); //Smooth Scroll
		}
		jQuery(yourLinkWrap).each(function(){
			var tmpLink = jQuery(this).find('a');
			jQuery(tmpLink).on('click',function(){
				var target = jQuery(tmpLink).attr('href');
				target = target.substring(1);
				var checkIfOpen = jQuery('a[data-openlink="' + target + '"]').hasClass('active');
				
				// --- Start: This closes all other accordions
				jQuery('.fusion-accordian.accordian .fusion-panel').each(function(){
					jQuery(this).find('h4 > a').removeClass('active');
					jQuery(this).find('.panel-collapse').removeClass('in');
					jQuery(this).find('.panel-collapse').css('height','0');
				});
				// --- End
				
				//If already open do nothing, just closes the active one
				//Otherwise proceed as usual open the accordion and scroll to it
				if(!checkIfOpen){
					jQuery('a[data-openlink="' + target + '"]').click();
					jQuery('html,body').animate({scrollTop: jQuery('a[data-openlink="' + target + '"]').offset().top - (jQuery('.fusion-header').height() + 25)},500,'swing'); //Smooth Scroll
				}
				
			});
		});
	}	
    

  

}); 

</script>

Usage:

Copy the script and insert it into your sites Javascript file or Avada Theme Option Custom Javascript.

Change the variable yourLinkWrap to your wrapper selector

Create a link anywhere with domain.com/page/#TABTITLE

The #TABTITLE is the first word of the accordions tab title.

Example:

You create an accordion (Avada Element Name is: Toggle).
The first Items title is: "Space is Awesome"
#TABTITLE would be #space

I removed the explanation entirely and instead improved the code, and added some comments to make it more clear. If you should still have a question or need help to implement this script in your website or you run into issues, leave a comment or write me a mail.

8 Comments

Donovan says:

21 May 2019 at 07:19

Hello,

We’ve been trying to follow your directions on this and I feel like we are missing something. What exactly goes in the “PAGENAME” area of the code? Also, regarding the “Accordion ID”. The Fusion Builder automatically creates a unique URL for every accordion item. Wouldn’t it be best to use this instead? You can essentially copy/paste the URL and then get that unique id.

Last, if you wanted to this for each and every accordion item. I’m assuming you would have multiple versions of this code, correct?

Reply
- Ingo Holder says:
  
  8 July 2019 at 20:57
  
  Hello Donovan!
  
  PAGENAME is an identifier for a site that contains an accordion. So it doesn’t trigger the Javascript on a page that has none. Sorry if I weren’t specific enough.
  For example, if I have a unique identifier on a page lets say the body has the class “clubhouse”. I’d do jQuery(‘body.clubhouse’).length.
  
  My approach was to have a nice looking URL instead of a generated code. Most users wouldn’t probably care and you could go with the ID of the Fusion Builder. The thought was if you’d sent a link to somebody domain.tld/#cool-name does look better than domain.tld/#472897422.
  
  With this code, you have to duplicate the first half every time if you have multiple versions accord the site. the function doesn’t need to be duplicated since it will always work.
  In my example and my client situation, I had only one specific page with an accordion. For a global scope I’d do something like this:
  jQuery(document).ready(function(){ if(jQuery('.fusion-accordian').length){ // Identifier for the fusion accordion element var accordionID = '#' + jQuery('.fusion-accordian > div').attr('id'); // get the Fusion accordions ID jQuery(accordionID + ' .fusion-panel').each(function(){ var tmp = jQuery(this).find('.fusion-toggle-heading').text(); jQuery(this).find('a').attr('data-openlink', tmp.split(' ')[0].toLowerCase()); }); openAccordion(accordionID); } }
  
  This should work if you have one accordion per page. If you have multiple on one page you should wrap everything inside the if-clause into a jQuery(‘.fusion-accordian’).each(function(){…})
  
  Reply

Wendy Foss McKinley says:

11 November 2019 at 17:03

Any thoughts on how to get this to work when the link is on the same page as the accordian?

Ingo Holder says:

12 December 2019 at 20:14

Hey Wendy!

Sorry for the really late reply. Been really busy and didn’t see your comment.

In case you’re looking for the solution, yes I do know how to do it.

jQuery('Selector > element').each(function(){ // replace selector and element to find your elements
    var tmpLink = jQuery(this).find('a'); // replace if needed to find the a-tag with the #yourToggle
    jQuery(tmpLink).on('click',function(){
        var target = jQuery(tmpLink).attr('href');
        target = target.substring(1);
        jQuery('a[data-openlink="' + target + '"]').click();
            jQuery('a[data-openlink="' + target + '"]').toggleClass('active');
            //Smooth Scroll
            jQuery('html,body').animate({scrollTop: jQuery('a[data-openlink="' + target + '"]').offset().top - (jQuery('.fusion-header').height() + 25)},500,'swing');
    })
})

With a bit of tweaking, this should work on the same page. When I find the time I will make a new post to do it on the same page. If you need direct help. Message me your problem directly. 🙂 Greetings – Ingo

Fran Romguer says:

13 November 2019 at 03:06

Hi Ingo,

I’m writing here because I’m not able to do this code work and I cannot understand why.

My website is a one-site page with some accordions that should be opened by clicking on some images redirecting to a link (#accordion1, #accordion2, etc) but at the moment on clicking on it nothing happens.

Maybe I’m wrong with the PAGENAME (I don’t know how it should be called properly) or I’m not inserting the code in the correct Custom Javascript (before head or body?).

Thanks for your code in advance, it is really useful to achieve a feature that is not able in Avada yet!

PS: looking for “documentales” or “obras de teatro” this images and toggles can be found easily (they have associated colors).

Reply
- Ingo Holder says:
  
  12 December 2019 at 20:07
  
  Answered by mail.
  
  Reply
Luca Matera says:

12 December 2019 at 19:18

Hello

I’m trying to use your script in avada with a map svg separated by regions but even if the URL are correcy it doesn’t work.As you will see I’ve used a button too but nor button neither links in the map works.
This is the URL of my page:

ioparlopsicologia.it/partners/

Thank you in advance.

Regards

Luca

Reply
- Ingo Holder says:
  
  12 December 2019 at 20:03
  
  Hey, I looked at your website. And let me start by saying this is a really creative way of implementation!
  
  The issue my script has is that it is only working if you go from another page to that specific point. I have to make an update soon on how to get it to work with on the same page toggles.
  
  For you this Code should work
```
// Selector maybe add an id / class to be sure that it is only used on this page
jQuery('svg > a').each(function(){  
    jQuery(jQuery(this)).on('click',function(){
        var target = jQuery(jQuery(this)).attr('id');
        jQuery('a[data-openlink="' + target + '"]').click();
            jQuery('a[data-openlink="' + target + '"]').toggleClass('active');
            //Smooth Scroll
            jQuery('html,body').animate({scrollTop: jQuery('a[data-openlink="' + target + '"]')
.offset().top - (jQuery('.fusion-header').height() + 25)},500,'swing');
    });
});
```
  Also, you should wrap that in a document ready function just to be sure everything is there before trying to do .each() javascript.
  
  I hope this helps! Looking forward to hearing from you
  
  Reply

How to open an Avada accordion with a link

Code:

Usage:

Example:

8 Comments

Leave a Reply Cancel reply