Online Marketing Sales & Support: 608-790-4000 scott@bernadot.com

The Setup

  • I created an FAQ (frequently asked questions) page for a client’s website recently using the Divi theme, and I was wanting to make the interaction with the FAQ’s toggled elements more user friendly.
  • I had set all toggled modules to be closed at loading to minimize scrolling and make searching for questions easier for users.

The Problem

  • By default, when I created a link from a specific keyword/phrase to the FAQ page, the user could be easily confused and wonder why they were taken to a page full of toggled questions. This is not good, as they would have to manually browse the various questions (toggled modules) to find the one respective to the link they clicked on. There had to be a better way.

Desired Solution

  • Be able to automatically open a single FAQ (toggled module) from a link using a hashtag
  • For example, if I clicked upon a link with this URL, “http://domain.com/faq/#howmuch” I would like it to open the FAQ (toggle module) with the heading “How much does a widget cost?”, and then the answer would automatically be revealed.

The Step by Step Solution.

1. Go to Appearance >> Divi Theme Options >> Integration >> Under the Add code to Body section >> copy  and paste this javascript code:

<script type="text/javascript">
(function($){
$(window).load(function(){
var et_hash = window.location.hash;
if(window.location.hash) {
$( '.et_pb_toggle' + et_hash )
.removeClass('et_pb_toggle_close')
.addClass('et_pb_toggle_open')
}
});
})(jQuery)
</script>

Like this: divi-theme-options-javascript   2. Next, go to your toggled module and assign a unique CSS ID name (tips: no spaces in ID, make the name memorable so you can easily recall it when creating links) within the CSS ID section found at the bottom of the screen (see below). This will be the anchor name used with the hashtag within the URL. Make sure to both Save the configuration settings and Update/Publish the page once you have added your ID name. divi-assign-css-id   3. Last thing to do now is create a link using the hashtag and the anchor name you created. So for example, if I am on my home page and want to link to the “howmuch” toggled module within the FAQ, I simply highlight the text I want to link >> Click the “link” button from the visual toolbar >> Paste in the URL of my FAQ page >> and append the #howmuch anchor. Final link will look like this: http://yourdomain.com/faq/#howmuch

Credit

  • With the help of Elegant Themes Support, I was able to get 3/4 of the way there. Thank you Catalin! However, there was an issue in the code they provided that opened all toggled modules when there was not a “#” present in the URL. I did a little searching and cobbled together the solution above.

 

Comments

comments