Webstudio

Log inLog into community

Join the Webstudio community

Updated 4 weeks ago

Fields in HTML Embeds

Fields in HTML Embeds

·

Hi, when I try to put the code below in an HTML Embed, I get "Unexpected token" as an error. Have I understood how to use the backticks and $ sign correctly? Thanks in advance

<style>
.accordion-header {
background-color: #f4f4f4;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.accordion-header:hover {
background-color: #ddd;
}
.accordion-content {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
.accordion-header:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
</style>
<div class="accordion-item">
<button class="accordion-header"></button>
<div class="accordion-content">
<p>${Collection Item["Review_1_Name"]}</p>
</div>
</div>
<script>
document.addEventListener('click', function(e) {
if (!e.target.matches('.accordion-header')) return;

e.target.classList.toggle('active');
var content = e.target.nextElementSibling;
if (content.style.display === 'block') {
content.style.display = 'none';
} else {
content.style.display = 'block';
}
});
</script>

Attachment

R

O

7 comments

Its not appearing in Discord for some reason but this part has the backticks and $ sign

Attachment

Just realised there is a Radix accordion so will probably use that instead 👌 But would still be good to know how to put collection item content into an HTML Embed

do you really need to put code into expression?

It seems to me that you want to separate your javascript into normal embed content and then add the bits that you want to interpolate in from webstudio

otherwise the entire code becomes a template string and that's not a good idea

you could minimize that interpolation by only having a final function call in a separate small script that you interpolate or setting up js variables first that have the interpolations, then using them

Add a reply

Sign up and join the conversation on Discord

","answerCount":7,"upvoteCount":0,"datePublished":"2024-10-01T10:25:43.042Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"},"suggestedAnswer":[{"@type":"Answer","text":"Its not appearing in Discord for some reason but this part has the backticks and $ sign","upvoteCount":0,"dateCreated":"2024-10-01T10:27:07.230Z","datePublished":"2024-10-01T10:27:07.230Z","dateModified":"2024-10-01T10:27:07.230Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#61dba41c-7455-4146-b25d-ee83c1914cb1","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"}},{"@type":"Answer","text":"","upvoteCount":0,"dateCreated":"2024-10-01T10:28:12.568Z","datePublished":"2024-10-01T10:28:12.568Z","dateModified":"2024-10-01T10:28:12.568Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#c8c09101-091d-47a5-bda6-ad37e6454520","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"}},{"@type":"Answer","text":"Just realised there is a Radix accordion so will probably use that instead 👌 But would still be good to know how to put collection item content into an HTML Embed","upvoteCount":0,"dateCreated":"2024-10-01T10:33:08.830Z","datePublished":"2024-10-01T10:33:08.830Z","dateModified":"2024-10-01T10:33:08.830Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#6edeaa54-e50c-4c9f-90c1-9ffd343c1f1e","author":{"@type":"Person","url":"https://help.webstudio.is/members/3b9309c9-0cac-45bd-9ba8-6832728a6040","name":"Richard","identifier":"3b9309c9-0cac-45bd-9ba8-6832728a6040","image":"https://cdn.discordapp.com/avatars/390467719885094924/e7fddc2d71f7455323786937600e50c0.webp?size=256"}},{"@type":"Answer","text":"do you really need to put code into expression?","upvoteCount":0,"dateCreated":"2024-10-01T10:52:49.736Z","datePublished":"2024-10-01T10:52:49.736Z","dateModified":"2024-10-01T10:52:49.736Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#ae567c39-edd5-4c56-8404-7f8695d86403","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}},{"@type":"Answer","text":"It seems to me that you want to separate your javascript into normal embed content and then add the bits that you want to interpolate in from webstudio","upvoteCount":0,"dateCreated":"2024-10-01T10:54:06.499Z","datePublished":"2024-10-01T10:54:06.499Z","dateModified":"2024-10-01T10:54:06.499Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#f91f1635-5b7a-46dd-8634-311d9c407fc6","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}},{"@type":"Answer","text":"otherwise the entire code becomes a template string and that's not a good idea","upvoteCount":0,"dateCreated":"2024-10-01T10:54:19.600Z","datePublished":"2024-10-01T10:54:19.600Z","dateModified":"2024-10-01T10:54:19.600Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#dc1b8a19-8560-49cf-a39f-f091c6a68a39","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}},{"@type":"Answer","text":"you could minimize that interpolation by only having a final function call in a separate small script that you interpolate or setting up js variables first that have the interpolations, then using them","upvoteCount":0,"dateCreated":"2024-10-01T10:55:41.319Z","datePublished":"2024-10-01T10:55:41.319Z","dateModified":"2024-10-01T10:55:41.319Z","url":"https://help.webstudio.is/fields-in-html-embeds-xr4Z1Mg8z81k#a299fa97-8542-4f9c-ab24-dba9d979c324","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"}}]}}