2

I am trying to get the bootstrap expand/collapse details to open automatically when you link to them from another page.

An example of this is I want to link to a page similar to http://www.agr.gc.ca/eng/?id=1535571735990, which has a bunch of expand/collapse sections. What I want to be able to do though, is to link to a specific one and have only it open. So, if I wanted to link to AgriStabilty on the above page from somewhere else, I want the page jump down to that section (easy enough), but I also want it to be opened as well. If I link to Geospatial Products from somewhere else, I want it to go to that section and have it be open.

I know with the tabs in bootstrap, you can link to a specific tab and have it be open. I do not see anything stating that can be done with the expand/collapse. It seems to require jQuery, which I know nothing about.

Our site is also templated in a content management system, so I have no access to any of the scripts or CSS, only to what I can put in the body section.

We've already tried adding &open to the link on the starting page before the anchor (i.e. ?id=1553800901644&open#ar) and then added the following script before the content and after the content

Link on starting page:

<a href="?id=1553800901644&open#ar">

HTML on target page for above destination:

<details id="ar">
      <summary>Arabic <i lang="ar">العربية</i></summary>
  stuff goes here
</details>

JavaScript:

<script>
function getAnchor() {
    var currentUrl = document.URL,
     urlParts   = currentUrl.split('#');

    return (urlParts.length > 1) ? urlParts[1] : null;
}

if(document.URL.indexOf("&open") != -1) {
     document.getElementById(getAnchor()).click();
}
</script>

We were hoping it would go to the right place on the page (which it does), and then mimic clicking on the link to expand the collapsed content. However, the &open does not get added to the URL of the destination page when it opens. So nothing above works except the anchor. It seems like something is overriding the &open addition to the URL.

Does anyone know how to do this given the restrictions at hand?

Ferkner
  • 79
  • 1
  • 6

1 Answers1

0

I have seen a similar situation. By using an iframe, the other page can be pulled into the current html document. To be be more specific, a section of a web page can be referenced by calling an associated id in the URL. Refer to this post on stackoverflow: link to a section of a webpage

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div>
<iframe src="url_where_dropdown_accordian_is_and_reference_id_of_div_tag_of_opened_accordian?" style="border:none;"></iframe>
</div>
</body>
</html>
Dwayne Gibbs
  • 58
  • 7
  • Hope this helps. Comment appreciated. – Dwayne Gibbs Apr 14 '19 at 14:35
  • Part of the reason for going the route we are is to reduce the number of pages that need to be maintained and eventually migrated to a new content management system. I am also not sure we are allowed to use iframes; none of the documentation we use (that I have seen) mentions iframes, nor am I sure how they affect accessibility. – Ferkner May 07 '19 at 15:24