Similar to <Show/> , it renders its children based on a condition, the difference is that the element is not removed from the document if the condition becomes falsy. Useful for iframes, canvas, video, audio.
name type description when any once when becomes truthy, it will show its children fallback any when `falsy` a fallback could be displayed
A youtube video keeps playing in the background even if the collapse element is set to be hidden
import { render , signal } from ' pota ' import { Collapse } from ' pota/web ' function Example ( ) { const [ showing , setShowing , updateShowing ] = signal ( true ) return ( < > < button name = " button " on : click = { ( ) => updateShowing ( showing => ! showing ) } > toggle </ button > < Collapse when = { showing } > < iframe width = " 560 " height = " 315 " src = " https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=U8aoXoxgc77CKWOo&start=1 " frameborder = " 0 " allow = " accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share " allowfullscreen > </ iframe > </ Collapse > </ > ) } render ( Example )
A youtube video keeps playing in the background and a fallback is shown
import { render , signal } from ' pota ' import { Collapse } from ' pota/web ' function Example ( ) { const [ showing , setShowing , updateShowing ] = signal ( true ) return ( < > < button name = " button " on : click = { ( ) => updateShowing ( showing => ! showing ) } > toggle </ button > < Collapse when = { showing } fallback = { < div style = " color:aquamarine " > The video is playing and this is the fallback! </ div > } > < iframe width = " 560 " height = " 315 " src = " https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?si=U8aoXoxgc77CKWOo&start=1 " frameborder = " 0 " allow = " accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share " allowfullscreen > </ iframe > </ Collapse > </ > ) } render ( Example )