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, the children are shown. When it becomes falsy they are hidden but stay mounted, so iframes, canvases, video and audio keep their state. fallback any rendered in place of the children while when is falsy
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/components ' 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 " 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/components ' 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 " allow = " accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share " allowfullscreen > </ iframe > </ Collapse > </ > ) } render ( Example )