Link a HTML button created in personalized code to a Wix button on my page

Ask the community
,
1

I’m having trouble with
Hi everybody,

I just created a sidebar (HTML personalized code in WIX dashboard, not an iframe), and everything is ok.

I decided to create this sidebar (HTML) , for aesthetic reasons. Before, I used WIX buttons and a frame around them. With HTML code, it’s much better. That’s why I created this.

I’ve got Wix buttons with specific actions.

I would like to expand a section, or collapse it by the button created in the side bar, but it doesn’t know how to?

is there a way to link those buttons actions?

Thanks a lot.

Working in
Wix Editor, Dev Mode, VELO and HTML

here the html code:

Interface personnalisée body { margin: 0; padding-bottom: 60px; font-family: 'Segoe UI', Tahoma, sans-serif; } 
/* SIDEBAR */
.sidebar {
  position: fixed; top: 60px; left: 0; width: 250px;
  height: calc(100vh - 60px); background-color: #9aa392;
  border-right: 1px solid #6E776E; padding: 0 20px; box-sizing: border-box;
  z-index: 1000; overflow-y: auto;
}
.sidebar .section {
  margin-top: 35px; background-color: #6E776E; color: white;
  border-radius: 10px; padding: 12px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 15px; transition: background 0.3s;
}
.sidebar .section:hover { background-color: #5a615a; }
.sidebar .section i { margin-right: 10px; }
.sidebar .toggle-btn {
  background-color: #6E776E; color: white; border: none; border-radius: 6px;
  width: 25px; height: 25px; font-weight: bold; cursor: pointer;
}
.sidebar .content {
  margin-top: 10px; padding-left: 20px; display: block;
}
.sidebar .content a {
  display: flex; align-items: center; gap: 8px; color: white; text-decoration: none;
  margin: 5px 0; font-size: 13px; padding: 5px 8px; border-radius: 6px;
  transition: background 0.3s, transform 0.2s; cursor: pointer;
}
.sidebar .content a:hover {
  background-color: orange; color: #6E776E; transform: translateX(5px);
}
.sidebar .content a i { width: 20px; text-align: center; }

/* NAVBAR */
.top-navbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  background: linear-gradient(to right, #6E776E, #505650);
  display: flex; align-items: center; padding: 0 20px; box-sizing: border-box;
  z-index: 1001; justify-content: space-between;
}
.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-right { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.top-navbar input {
  width: 43px; height: 50px; border-radius: 10px; border: 1px solid #ccc;
  background: white; padding: 5px;
}
.separator-vertical { width: 3px; background-color: #fff; height: 35px; margin: 0 10px; }
.top-navbar button#TEXTEMENUBis {
  width: 310px; height: 40px; border-radius: 50px; border: 1px solid white;
  background-color: #6E776E; color: white; font-family: 'Avenir', sans-serif;
  font-weight: 300; font-size: 16px;
}
.top-navbar i { color: white; font-size: 18px; margin-right: 5px; }
.top-navbar a { color: white; font-size: 14px; text-decoration: none; display: flex; align-items: center; gap: 5px; }
CONNEXION UTILISATEUR
RESERVATIONS−
EDITION−
GESTION CAISSE−
EPICERIE−
PARAMETRES−

Section Accueil

Section Listeresas

© 2025 Camping Le Pré du Roi **
Tous droits réservés
2

I feel these links might help with what you’re trying to do:

1 Like
3

Hi Rob, Thank you for your answer.:ok_hand:

Effectively, i tried this, but without success

4

As mentioned here, widgets or libraries that need access to the rest of the page won’t work in an HTML element though you can pass information from the iFrame to the page as shown in the example.

If you would like the element to to interact with the page, it would need to be within the page.
I’m not sure if you could share the page and/or complete code to see as most of the code I see is CSS and you could use that for elements within the page.

5

I finally succeeded effectively using postmessage & on message between iframe and wixpage
everything ok

Thank you very much

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.