changing css trough html Embed?

What code are you using? And what does the setting of the html embed look like?

Basically I want to create a button with the html embed with which I want to show and hide an element which was built in the builder

the code would be something like that:

<button id="toggleButton" onclick="toggleVisibility()">Show</button>
<div id="test">This is the content to show or hide.</div>

<script>
function toggleVisibility() {
const testElement = document.getElementById('test');
const button = document.getElementById('toggleButton');

if (testElement.style.display === 'none') {
testElement.style.display = 'block';
button.textContent = 'Hide';
} else {
testElement.style.display = 'none';
button.textContent = 'Show';
}
}
</script>

stuff like this is likely to have broken accessibility, check radix components for this stuff

since you don't explain what exactly you are hiding/showing we can't tell what you need

I have already tried to work with the radix and the element Collapsible fits best because I want to show and hide text and pictuers underneath with a button. But I want the text of the button to change when it is clicked and that the button is detached from the collapsible content.

Can you show/describe the ux you are aiming after? I am curiuos what would be the right abstraction here

the button fades the text underneath in and out, when the button is unfolded it should say “close” in it and the arrow should be the other way around.