# FAQ Module - Linking to and opening

**URL:** <https://community.hubspot.com/t/faq-module-linking-to-and-opening/763>\
**Category:** CMS Development\
**Created:** [January 18, 2017, 8:39am UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763 "2017-01-18T08:39:18Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![macdan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/macdan/32/30191_2.png) [@macdan](https://community.hubspot.com/u/macdan)\
**Post date:** [January 18, 2017, 8:39am UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/1 "2017-01-18T08:39:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [January 18, 2017, 2:09pm UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/2 "2017-01-18T14:09:20Z")

</div>

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.

```auto
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

---

<div class="post-metadata">

**Author:** ![macdan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/macdan/32/30191_2.png) [@macdan](https://community.hubspot.com/u/macdan)\
**Post date:** [January 18, 2017, 2:38pm UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/3 "2017-01-18T14:38:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![macdan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/macdan/32/30191_2.png) [@macdan](https://community.hubspot.com/u/macdan)\
**Post date:** [January 20, 2017, 9:41am UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/4 "2017-01-20T09:41:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [January 20, 2017, 4:28pm UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/5 "2017-01-20T16:28:53Z")

</div>

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)

```auto
$(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._

```auto
$(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](http://codepen.io/TyStelmach/pen/ZLeMJp)

[Clicking this link should append a class and show you a blue box](http://codepen.io/TyStelmach/pen/ZLeMJp#redbox)

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

-- Ty

---

<div class="post-metadata">

**Author:** ![macdan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/macdan/32/30191_2.png) [@macdan](https://community.hubspot.com/u/macdan)\
**Post date:** [January 20, 2017, 4:54pm UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/6 "2017-01-20T16:54:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Ty](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ty/32/5413_2.png) [@Ty](https://community.hubspot.com/u/Ty)\
**Post date:** [January 20, 2017, 5:21pm UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/7 "2017-01-20T17:21:16Z")

</div>

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**

```auto
<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**

```auto
$(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.](http://codepen.io/TyStelmach/pen/ZLeMJp#hs_cos_wrapper_widget_1476457149680)

Let me know if this is working as expected 🙂

-- Ty

---

<div class="post-metadata">

**Author:** ![macdan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/macdan/32/30191_2.png) [@macdan](https://community.hubspot.com/u/macdan)\
**Post date:** [January 21, 2017, 11:03am UTC](https://community.hubspot.com/t/faq-module-linking-to-and-opening/763/8 "2017-01-21T11:03:46Z")

</div>

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

`.accordion-group`

should be:

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

```

All the best!