Boy that was a hard one the code to change the state is easy but it won't work because the radix component won't actually react to the new value. So there are two ways you can handle this:
- You can do it like Bogdan said you can have 2 instances i personal don't like this way because you have two instances so more unnecessary code which is unused on some devices but the other Option isn't the best either
- You can writea Skript to click the button if it isn't collapsed on Desktop or in Case it is Collapsed on Mobile so whenever the site loads it shows it correctly and afterwrads it works as you want it to work:
Here the Code place it inside a HTML embeed or in the Page settings:
<script type="module">
const root = document.getElementById("myCollapsible");
const btn = document.getElementById("myCollapsibleTrigger");
const mq = window.matchMedia("(min-width: 768px)");
function sync() {
if (mq.matches && root.dataset.state === "closed") { // if state == closed so we don't close it if its open
btn.click(); // Opens Radix
}
if (!mq.matches && root.dataset.state === "open") { // if state == open so we don't open it if its closed
btn.click(); // Close Radix
}
}
window.addEventListener("load", sync);
mq.addEventListener("change", sync);
</script>
If you want the Code to work set IDs in the collapsibel and in the Button(use the IDs from the Skript) You can change the breapoint in the skript. Don't set any other Values like the dafultopen or the open we used before.
This should work if you have any questions or need more let me know
