Deepyr Documentation

Collapse with focus

This collapse works with focus. When the div loses focus, it gets closed.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus, // Opens on focus, closes on blur
  title: text('How do I create an account?'),
  content: text('...'),
  classes: 'bg-base-100 border border-base-300',
)

Collapse with checkbox

This collapse works with a checkbox. It needs to be clicked again to get closed.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.checkbox, // Toggles on click
  title: text('How do I create an account?'),
  content: text('...'),
  classes: 'bg-base-100 border border-base-300',
)

Collapse using <details> and <summary> tag

collapse-open and collapse-close modifiers don't work with this method. Instead, you can control the `initiallyOpen` prop.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.details, // Uses native <details> element
  title: text('How do I create an account?'),
  content: text('...'),
  classes: 'bg-base-100 border border-base-300',
)

Without border and background color

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus,
  title: text('How do I create an account?'),
  content: text('...'),
)

With arrow icon

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus,
  title: text('How do I create an account?'),
  content: text('...'),
  style: [Collapse.arrow],
  classes: 'bg-base-100 border border-base-300',
)

With plus/minus icon

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus,
  title: text('How do I create an account?'),
  content: text('...'),
  style: [Collapse.plus],
  classes: 'bg-base-100 border border-base-300',
)

Force open

I have collapse-open class

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus,
  title: text('I have collapse-open class'),
  content: text('...'),
  style: [Collapse.open],
  classes: 'bg-base-100 border border-base-300',
)

Force close

I'm closed by default, but you can still focus me

Click the "Sign Up" button in the top right corner and follow the registration process.

Collapse(
  method: CollapseMethod.focus,
  title: text("I'm closed by default..."),
  content: text('...'),
  style: [Collapse.close],
  classes: 'bg-base-100 border border-base-300',
)

Custom colors for focus method

Use Tailwind CSS `focus:` utilities directly in the `classes` property.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

// The deepyr styling system doesn't yet abstract state variants
// for root elements (like focus:bg-secondary).
// Apply these utilities directly via the `classes` property.
Collapse(
  method: CollapseMethod.focus,
  title: text('How do I create an account?'),
  content: text('...'),
  classes: 'bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content',
)

Custom colors for checkbox method

Use `peer` and `peer-checked` utilities. This requires a manual structure as the styling applies to siblings of the input, which the `Collapse` abstraction doesn't expose directly.

How do I create an account?

Click the "Sign Up" button in the top right corner and follow the registration process.

// This effect relies on the `peer` and `peer-checked` TailwindCSS classes
// to style siblings of the checkbox. The high-level `Collapse` component
// doesn't expose the internal elements for this specific styling hook.
// To achieve this, construct the component with basic Jaspr elements.

div(classes: 'collapse bg-base-100 border border-base-300', [
  input(type: InputType.checkbox, classes: 'peer'),
  div(
    classes: 'collapse-title bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content',
    [text('How do I create an account?')],
  ),
  div(
    classes: 'collapse-content bg-primary text-primary-content peer-checked:bg-secondary peer-checked:text-secondary-content',
    [text('...')],
  ),
])