Toggle div visibility on and off

hi
i am making a sort of offcanvas setup, i know wappler supports offcanvas but i think my own sidebar div will work better for me.

i just want to hit a button to hide and show and hide and show the left sidebar

i have read the toggle guide

but that only toggles it one way, off or on, not repeat, I believe a ternary is possible but cant quite figure out what to put in the syntax

        <div id="sidebar" class="sidebar-wrapper" dmx-hide="toggle1.checked">

how would i make the button toggle it on and off?

thanks

How do you control the toggle? Is it via some button click? If yes - please post the code of it.

yes, sorry should have posted that as well

<button id="btn1" class="btn" dmx-on:click="toggle1.uncheck()">Button</button>

doh !

i figured it lol, selected toggle option

although i would like it checked on larger devices and unchyecked on smaller devices by default lol, thought my @media css would tajke care of that but it doesnt, so think back to the drawing board lol

Have you thought of using the browser component?

dmx-bind:checked="browser1.device.width&gt;=576"

thats a new one on me, have to see if can make that work. Basically I want a sidebar to always show on 998 or larger and then be toggle on smaller devices, i may just set it up as rows and cols and do it that way, but as the side by is in a php include and the main part in the main pages that include it sort of makes it a bit messy, but still playing, i just couldnt get the offcanvas sstuff working quite how i wanted, my topnav bar always present, with a side offcanvas present on large and toggle on small, lots of themes have it but all quite comp[ex and in theory the css is pretty simple, just having it show always on larger and hidden on smaller with the toggle

Not at my machine right now but wappler has a built in nav component for the front end. Take a look at it and see if that works for you.

yeah its got the offcanvas, had a little play but could get it quite right, i want my top bar 100% wifth then side bar etc, and couldnt seem to quite make it work so thought it cant be too hard with html and css, do prefer to try to use wappler bits out the box but cant always get quite what i want

going form a simpler version of this

https://codervent.com/synadmin/demo/vertical/index.html

top fixed top nav, toggle side bar, but want my sidebar below the topnav

No I dont mean the off canvas. There’s a separate “Nav” element.