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 :slight_smile:
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>```