External link to fully open accordion item

Design help Animations & Interactions
1

Hi
I am trying figure out how I can achieve following:
I have 2 pages, on one page I have links to specific section on other page. Sections are hidden and fully accessible by clicking on extension arrow or title (something like accordion), by default all sections are “closed” again like accordion :)
So, question is how I could make links direct to hidden part, so if you click on specific link you get to fully open sections?
Basically how I can make external link to fully open accordion section, but on accordion page accordion items would be closed by default?

Hope question makes sense!
Thanks, any help would be very appreciated.
Ints

Here is my public share link: LINK
(how to access public share link)

2

You can write some JavaScript code to click on the tabs on page load when a query parameter for that tab is detected in the URL.

3

Hello. I would like to know what the JavaS cript is to make the accordion section open automatically if I share the link. Thank you so much!

4

You ever find a solution for this? I’m trying to do the same thing.

5

Also trying this, please share any solutions

6

Page 1 (with link) :
You need to add a query parameter to each link like this :
(I use tab but you can use whatever you want)
Link1?tab=tab1
Link2?tab=tab2
Link3?tab=tab3

Page 2 (with accordion/tabs)
you need to set an ID in webflow to the clickable part of the accordion/tab
and add this code :
ID tab 1 = tabnb1
ID tab 2 = tabnb2
ID tab 3 = tabnb3

<script>
    var url_string = window.location.href ; //window.location.href
    var urlTest = new URL(url_string); 
    var tablink = urlTest.searchParams.get("tab"); //create tablink to store the value of ?tab

    
 
 window.onload = function() {
    if (tablink == "tab2") {
    document.getElementById("tabnb2").click(); //ID of the tab you want to click if tab=tab2
    } else if (tablink == "tab3") {
    document.getElementById("tabnb3").click(); //ID of the tab you want to click if tab=tab3
    } else if (tablink == "tab1") { 
   document.getElementById("tabnb1").click(); //ID of the tab you want to click if tab=tab1
   } else { 
   document.getElementById("tabnb2").click(); //ID of the tab you want to click
 }
}
    
</script>```
1 Like
7

Hello. I am facing the same problem and trying to get this solution to work. For some reason, its not working though. Could you please take a look at my read-only link and let me know what I’m missing?

I’m basically trying to get the “Service Card Link Block” on the Home page to click the “Accordion Item Trigger” on the Services page and reveal the section below it.

https://preview.webflow.com/preview/muse-online?utm_medium=preview_link&utm_source=designer&utm_content=muse-online&preview=d30799833631024f06326165c5a8d7f2&pageId=64821673e75a4a2af1cda230&workflow=preview

Thanks!

8

Thanks for posting this question. I had the same issue. I leveraged the solution posted by Louis_s, but made a few tweaks, so I thought I would share.

I did as Louis suggested and added an id to all of my accordion topics. I think it is simpler to use that id, rather than the if/else logic, so I’d use this:

<script>
  const url = new URL(window.location.href); 
  const id = url.searchParams.get("id");
 
  window.onload = function() {
    if (id != null) {
      document.getElementById(id).click();
    }
  }
</script>

For my page, I needed to scroll the item into view and get past a large header at the top of the page, so in order to do that, you can use scrollTo() like this:

<script>
  const url = new URL(window.location.href); 
  const id = url.searchParams.get("id");
 
  window.onload = function() {
    if (id != null) {
      const el = document.getElementById(id);
      const yOffset = -100;
      const y = el.getBoundingClientRect().top + window.scrollY + yOffset;
      window.scrollTo({top: y, behavior: 'smooth'});
      el.click();
    }
  }
</script>

Hope that can help someone else!

1 Like
9

Thanks a lot for sharing this! Got it working