How to use anchor links to open accordions and toggles in Divi

by | Nov 10, 2020

Have you ever wanted to link to a specific Divi accordion or toggle and/or have a link that would automatically open that item? Us too! Unfortunately, it’s not as straightforward as you would think, but fortunately for you, we found a way to do it! This quick tutorial will help you link to a specific accordion or toggle item and automatically open that item for you in just 3 simple steps! Let’s get to it…

Step 1:

Copy the following code into Divi > Theme Options > Head section, as illustrated below:

 

<!-- Automatically Open Accordion or Toggle from Anchor Link -->
<script>
	(function($){
		let hash = '';
		function doClasses(url){
			hash = url;
			let target = '.' + hash,
				module_check = hash.split("_");
			if(module_check[2] == 'accordion' || module_check[2] == 'toggle'){
				if(!$(target).hasClass('et_pb_toggle_open')){
					$(target).toggleClass('et_pb_toggle_open et_pb_toggle_close');
					$(target).siblings('.et_pb_accordion_item').removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close');
				}
			}
		}
		function scrollToElement(el){
				let elementTop = $('.' + el).offset().top,
				    headerTop = 90;
				if($('body').hasClass('et_fixed_nav')){
					headerTop = $('header').height() + 90;
			}
			let scrollTo = elementTop - headerTop;
			$('html, body').animate({scrollTop: scrollTo + "px"}, 300);
		}
		function loadToggle(){
			if( window.location.hash.slice(1) && (window.location.hash.slice(1).includes('accordion') ||  window.location.hash.slice(1).includes('toggle') )){
				doClasses(window.location.hash.slice(1));
            	scrollToElement(window.location.hash.slice(1));		
			}
		}
        function clickToggle(){
            $('a.et_pb_button').click(function(e){
				const href = $(this).attr('href'),
					  splitHref = href.split('#'),
					  postHref = splitHref[1];
				doClasses(postHref);
                scrollToElement(postHref)
			});
        }
		$(document).ready(function(){
			loadToggle();
			console.log('loaded');
			$('a.et_pb_button').off();
			clickToggle();
		});
	})(jQuery)
</script>

Step 2:

Use inspect element to find the ID of the accordion or toggle item you want to link to. It will either be displayed as et_pb_accordion_item_# or et_pb_toggle_#. The hashtag at the end of those simply represents a number that will change, depending on the ID of the accordion or toggle you wish to link to.

Step 3:

Format your URL to include the ID from Step 2. It will look something like the example below. Note the hash tag after the forward slash and before the accordion or toggle ID. This is what makes is an anchor link to the item you wish to link to.

Sample accordion URL: https://your-website-url/#et_pb_accordion_item_#
Sample toggle URL: https://your-website-url/#et_pb_toggle_#

If you want a shortcut to finding the URL without using inspect element every time, simply start with 0 and count the set of accordions or toggle items to determine the ID. Plugin that into the sample above and you’re good to go! Keep in mind that if you move around your accordion or toggle items that this will change the ID number of the item you’re linking to.

Playground:

Try it out below using our sample accordion and toggle items below. You can start with the URL of this post and simply add the ID of the item you wish to open from an anchor link. We’ve provided a sample accordion link as well as a toggle link below:

Sample accordion: https://besuperfly.com/blog/how-to-use-anchor-links-to-open-accordions-and-tabs-in-divi/#et_pb_accordion_item_1

Accordion Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Accordion Item #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Accordion Item #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Sample toggle: https://besuperfly.com/blog/how-to-use-anchor-links-to-open-accordions-and-tabs-in-divi/#et_pb_toggle_1
Toggle Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Toggle Item #2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Toggle Item #3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor lorem sit amet facilisis malesuada. Integer eu nisl quam. Nullam euismod dui a diam scelerisque, quis ullamcorper dolor luctus. Sed aliquam dignissim nibh nec mattis. Nullam viverra lacinia mi tincidunt pretium. Nam et dictum velit. Vestibulum vehicula risus eget cursus mollis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

We hope this tutorial was helpful to you! Be sure to comment below and let us know where you’ve implemented this, we’d love to check it out! ✌️

 

by Nathan Duvall

Nathan is the creator and an owner of BeSuperfly, one of the first third party Divi shops as well as the creator of GruffyGoat.com, an agency he started in 2012, dedicated to offering affordable websites solutions to non-profits, mom & pop shops and everyone in-between. In his spare time, you'll find him wrangling his 2 boys or watching his Tennessee Volunteers or Indianapolis Colts.

more posts

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *