Collapsible

Collapsible is a pure Elixir Mob composite. You write it as a <MishkaCollapsible> tag, give it a title, and put the region you want to reveal in the tag's children. The children render only while open is true.

The screen owns the state. You keep a boolean in your assigns, pass it in as open, and flip it when the {:tap, tag} message arrives in handle_info/2.

The row looks the same as one Accordion item, with the title on the leading edge and a chevron on the trailing edge: ▸ when closed and ▾ when open. The events differ. An accordion widens its tag to {tag, item_id} so one handler can serve many rows. A collapsible has one region, so it sends a bare {:tap, tag}.

The trigger is a tappable Box instead of a Button, because a Material Button on Android centers its label. A disabled collapsible wires no handler at all, so it cannot fire, and its title renders muted.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob collapsible

The generator registers the component's tag, so you can use it in ~MOB markup. It also copies the shared Event helper module that the component uses to wire its tap handler. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaCollapsible>. Without a prefix the tag is <Collapsible>.

One trigger, one region and one boolean in the screen. The header sends {:tap, :toggle}, and the handler flips the boolean.

A collapsible disclosure

LTR RTL

Preview

Show the whole example Show less

<MishkaCollapsible
  title="Shipping details"
  open={@open}
  on_toggle={:toggle}
>{body}</MishkaCollapsible>

def handle_info({:tap, :toggle}, socket) do
  {:noreply, assign(socket, :open, not socket.assigns.open)}
end

Set chevron={false} to hide the indicator when the row already reads as a control.

Collapsible without a chevron

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. One trigger shows and hides one region.

<MishkaCollapsible
  title="More"
  open={@open}
  chevron={false}
  on_toggle={:t}
>{body}</MishkaCollapsible>

A disabled collapsible wires no handler, so the header cannot open it. The screen can still hold it open, as the second row in the screenshot shows: it is open because the screen passes open={true}, not because someone tapped it.

Disabled collapsible

LTR RTL

Preview

Show the whole example Show less

<MishkaCollapsible title="Locked" disabled={true}>{body}</MishkaCollapsible>

background, color, corner_radius and padding are props. Set color whenever you set background. The default text color belongs to the theme, so a tinted panel no longer matches it.

Collapsible with custom colors

LTR RTL

Preview

Show the whole example Show less

Left: the example as it loads. Right: after a tap. Color the trigger and the panel with props.

<MishkaCollapsible
  title="Tinted"
  open={@open}
  background={0xFF7C3AED}
  color={0xFFFFFFFF}
  corner_radius={:radius_lg}
  on_toggle={:t}
>{body}</MishkaCollapsible>

def handle_info({:tap, :t}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open, not socket.assigns.open)}
end

Props of the <MishkaCollapsible> tag.

on_toggle sends {:tap, tag} to the screen. The tag is the one you passed, with no item id added. Flip the boolean in handle_info/2:

def handle_info({:tap, :toggle}, socket) do
  {:noreply, Mob.Socket.assign(socket, :open, not socket.assigns.open)}
end

These web attributes are not ported, because they anchor or style the DOM, or depend on a browser feature:

• id and the *_class attributes.
• hidden_until_found, which lets a browser's find-in-page reveal collapsed text. Native views have no find-in-page.

• Headless Collapsible, the web component this one ports.
• Mob Accordion, a stack of titled items with an open set.
• Mob Spoiler, long content behind a Show more control.
• Mob components, the full list of native components.