Including links/buttons inside a tab link? (trying to use Javascript appendChild)

Design help Custom code
1

Hi,

Concept
I’m trying to build a Locations page, with each location having a tab. So, when someone clicks on one location [left side] , the map/image is connected [right right].
(This is a pic of what that looks like on Figma).

Frame 737
Frame 7371280×1600 315 KB

Trying to use tabs
I wasn’t sure how to implement this, so I tried

  • putting the location content [left] inside tab links
  • putting the map/image [right] inside tab panes

However, I found out that links and buttons are not allowed within a tab link. So, I’m not sure how to work around that?

Is there a way using code?
I’m at a very beginner-level when it comes to using JavaScript, so I’m not sure if this would work?

I thought about putting the location content (with the links) inside a div that’s separate from the tab links. Then, I could use JavaScript to append that div to the inside of the tab link?

When I tried publishing the site, though, it didn’t really do anything.

<script>

function adding_the_div() {
    var add_div = document.getElementById("add-div");
    var existing_div = document.getElementById("existing-div");

    existing_div.appendChild(add_div); 
    
  }  
  
  window.onload = adding_the_div();

</script>

I added ID’s of

  • “add-div” to the content I want to add
  • “existing-div” to the tab link

If anyone could help, that’d be greatly appreciated! Thanks!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I found a solution! Sorry I didn’t see your post sooner, but figured I’d reply for future folks who find this thread.