Unable to access the content using list item id attribute

I have an anchor tag on my website so that when user clicks on it, I can take them to the FAQ page of a different website.

<a href="https://company.mycompany.com/services/faq/#faq-31" title='My company FAQ' target='_blank' class='urlLink'>at least 5 business days</a>

For example, currently, since I’m testing locally, my website is the following

http://localhost:8080/mycompany/abc.htm

But after deployment, it’s going to be a different domain like following:

https://company.yourcompany.com/abc.htm

And I’m trying to access the https://company.mycompany.com/services/faq/#faq-31 site from my local deployment currently.

After clicking on the link and inspecting it in the Browsers developers window, I’m seeing that the link is showing like this:

<a href="https://company.mycompany.com/services/faq/?_gl=1*1en21*_ga*MTE2OTQ4MjY4My4xNjgxODM0NTQ2*_ga_F31GQF9LTB*MTY4MjM2NzU0Ny4yMS4xLjE2ODIzNzI5OTQuMC4wLjA.#faq-31" title="My company FAQ" target="_blank" class="urlLink">
at least 5 business days</a>

What is that stuff added before #faq-31 in the URL?

By the way, I tried testing https://company.mycompany.com/services/faq/#faq-31 from my computer browser, but it only loads the page as if I’ve just clicked https://company.mycompany.com/services/faq

Any idea if what I’m trying to achieve is possible?

Looks like Google tracking stuff, but i’m not sure why its being appended to your link URLs.

What’s the anchor tag on the FAQ page look like?

These are list items like this:

<ul class="list--faq">
   <li aria-controls="faq-10" aria-expanded="true" tabindex="0">How long will it take to test my stuff?</li>
   <li id="faq-10" style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s,</li>
 </ul>

Do you think the id based approach won’t work since I’m trying to access a list item from an anchor tag? Maybe a javascript or jQuery approach to take me to that particular section of the page?

It… should work (as of HTML 4, anyway) as long as faq-31 is actually unique as an id on the page…

Yeah, it’s a unique id. I have tried both options :

  1. https://company.mycompany.com/services/faq/#faq-31

  2. https://company.mycompany.com/services/faq#faq-31

But both are not working.

Do you think the following is creating a problem:

The following code has an accordion data-slide-toggle="true"

<li id="faq-10" style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s,</li>

Could that be causing this functionality not to work? If yes, then I am trying to understand why it is causing it.

https://cms.ok.ubc.ca/enhancement-request/link-to-anchors-inside-accordions/

https://company.mycompany.com/services/faq/#faq-31

What about https://company.mycompany.com/services/faq/#faq-10?

If the element you are linking to is hidden in some way (as in an accordion or tab structure) then you will not be able to link to it unless the host page has added that function to check for fragment identifiers and open up the element.

It is possible the website you are linking to does not allow linking to elements by ‘id’ with from another domain.

1 Like

I see. If I inspect the FAQ page using browser developer too, would it show me that the element I’m trying to link to is hidden or it’s obvious that in the case of an accordion or tab structure, it will be hidden even if the element doesn’t show anything like hidden upon inspecting it? Element does have display:none; style when it’s not clicked.

It’s the same issue with this as well.

If I have the accordion element expanded, then https://company.mycompany.com/services/faq/#faq-31 is taking me to this element. I guess since this element is set to display: none when not expanded, it’s not finding this element.

Is there documentation where I can read more about the host page adding a function to check for fragment identifiers and open up the element?

It basically boils down to looking at the url and checking the fragment identifier.

If the id in the url matches an element in the page then you’d need to write a script to open that element if it is hidden. There is no easy way to do this because an element may be hidden in a number of different ways (css or js) and may be many levels deep also (inside other hidden tabs). It can only be done by building it to match the structure of the current document.

Thanks @PaulOB . I am attempting to do it like this - as shown in my new post and it’s not expanding.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.