Streaming live at 10am (PST)

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


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).

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.


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

  window.onload = adding_the_div();


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)