I've done things similar to this when linking to something on the same page, I'm not sure how it would work if you linked from off the page, but you could get this a try.
var id = $(this).attr('href');
$(id).addClass("expanded");
What this does is it sets a variable for "this element's (element that is being clicked) href attribute (your #id). Then it takes the href attribute and adds a class onto the element with the same id.
Let me know if this works for you, if not I'll be more than happy to help you come up with a solution!
Jan 20, 201711:28 AM - edited Jan 20, 201711:30 AM
HubSpot Employee
FAQ Module - Linking to and opening
SOLVE
Hmm, it seems like it's not appending the class. Let's try something else.
Okay, this was actially a great warmup challenge for a friday. So let's try these 2 solutions.
Solution 1: Get from URL Hash
This is what your link to the page should show:
<a href="yoururl#yourid">go to id</a>
** Important, make sure your url DOES NOT end with a `/` otherwise the browser will treat it as a directory.
Then on your FAQ page, you want this JS (exactly like this)
$(function() {
var id = window.location.hash;
$(id).addClass('expanded');
});
What this is doing is setting a variable of `id` defined by the hash in your URL.
Then you are adding class `expanded` to your `id` variable, which would be your ID of your div (`#learnmore` for example). This should do it. However, if not, you can also try this.
Solution 2:
Keep the HTML Link the same and just use this JS instead.
$(function() {
var id = window.location.hash;
$('#' + id).addClass('expanded');
});
But I would lean towards the first solution before trying this.
Other things to note:
- Add your id to you div named "accordion_group" as this is the one where your class "expanded" will be activated
I think the problem here is that because it's a preconfigured module I don't have access to change the html (add the id to the FAQ) because it's locked down.