CMS Development

macdan
Member

FAQ Module - Linking to and opening

SOLVE

Hi

 

is it possible to link to an individual FAQ and also force it to open?

 

I'm aware I can target the FAQ with an ID but I'd also like it to expand as well.

 

Thanks for any help!

 

1 Accepted solution
Ty
Solution
HubSpot Employee
HubSpot Employee

FAQ Module - Linking to and opening

SOLVE

Okay! Third times the charm, I think we got it now!

Since the divs are built dynamically, we can't add ids, but they do have individual ids. So try this solution:

 

Your link from page 1

<a href="yoururl#hs_cos_wrapper_widget_1476457149680">Go to FAQs</a>

<!-- Remember to change the url id based on what tab to open -->

Then we are going to target it the same way in JS, except we'll utilize find to search that id for `accordion_group`

Your function on page 2

$(function() {
    var id = window.location.hash;
    var accor = $(id).find('.accordion-group');
    $(accor).addClass('expanded');
});

So now, we set these varibles

id = the hash in the URL

accor = finding 'accordion-group' within your URL hash's div

Then we finish it up buy adding the class to your scoped 'accordion-group'

 

Here is a link to codepen that shows it working as well, you should see a blue box.

 

Let me know if this is working as expected 🙂

-- Ty

View solution in original post

0 Upvotes
7 Replies 7
Ty
HubSpot Employee
HubSpot Employee

FAQ Module - Linking to and opening

SOLVE

Hi @macdan,

 

When the FAQ module is open, it sets a class of "expanded" onto that element / question. Like so:

<div class="accordion">
<div class="accordion_group expanded">
<div class="accordion_header" style="display: block;"><span class="accordion_icon"><i class="fa fa-plus-square" style="font-size: undefined; color: undefined;"></i></span> Your FAQ Question</div>
<div class="accordion_content" style="display: block;">
<p>Your FAQ Answer</p>
</div>
</div>
</div>

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! 

-- Ty

0 Upvotes
macdan
Member

FAQ Module - Linking to and opening

SOLVE

Thanks for your response Ty. I think I understand so I'll give it a go and post back

0 Upvotes
macdan
Member

FAQ Module - Linking to and opening

SOLVE

Hi, I've tried this approach, but without success:

 

var id = $(this).attr('href');
$(#hs_cos_wrapper_widget_1460469469372 .accordian .accordian_group).addClass("expanded");

 

Would you be able to indicate where I'm going wrong?

 

Many thanks

0 Upvotes
Ty
HubSpot Employee
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

 

Here is an example of it work:

Clicking this link should show you a red box

Clicking this link should append a class and show you a blue box

 

Really hope this works for you, let me know if not. I'll keep looking into it.

-- Ty

0 Upvotes
macdan
Member

FAQ Module - Linking to and opening

SOLVE

Thanks.

 

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. 

 

So is there a way of targeting this: 

 

#hs_cos_wrapper_widget_1460469469372 .accordian .accordian_group

 

and adding a class of 

expanded

to

 

.accordian_group

 

Unfortunately the second option expanded all faqs by default.

 

0 Upvotes
Ty
Solution
HubSpot Employee
HubSpot Employee

FAQ Module - Linking to and opening

SOLVE

Okay! Third times the charm, I think we got it now!

Since the divs are built dynamically, we can't add ids, but they do have individual ids. So try this solution:

 

Your link from page 1

<a href="yoururl#hs_cos_wrapper_widget_1476457149680">Go to FAQs</a>

<!-- Remember to change the url id based on what tab to open -->

Then we are going to target it the same way in JS, except we'll utilize find to search that id for `accordion_group`

Your function on page 2

$(function() {
    var id = window.location.hash;
    var accor = $(id).find('.accordion-group');
    $(accor).addClass('expanded');
});

So now, we set these varibles

id = the hash in the URL

accor = finding 'accordion-group' within your URL hash's div

Then we finish it up buy adding the class to your scoped 'accordion-group'

 

Here is a link to codepen that shows it working as well, you should see a blue box.

 

Let me know if this is working as expected 🙂

-- Ty

0 Upvotes
macdan
Member

FAQ Module - Linking to and opening

SOLVE

Thanks Ty that's solved it 🙂 One small tweak on your code is 

.accordion-group

should be:

$(function() {
    var id = window.location.hash;
    var accor = $(id).find('.accordion_group');
    $(accor).addClass('expanded');
});

All the best!