Mishka
Chelekom

Accordion

v0.0.10

v0.0.10StableComponentStatelessJS-moduleJSApache-2.0
Installation mix mishka.ui.gen.component accordion
Source View Source

Overview of the Phoenix and LiveView Accordion Component

The Mishka Chelekom Accordion module offers a wide variety of styles and colors for Phoenix, this module allows you to add different variants and colors for a personalized appearance. With options to include icons and media, the accordion is ideal for managing and showcasing data efficiently. Its ability to divide content into collapsible sections provides a clean and functional way to present large volumes of information.

Overview of the Phoenix and LiveView Accordion Component

Mishka Chelekom focuses on developer experience and performance. Built with Phoenix Liveview, it offers a variety of components, and provides comprehensive documentation with regular updates.
By using various props and different range of values, or class props for component-specific changes. We support Tailwind, and dark mode out of the box.
You can see Getting Started page to learn how to integrate Mishka Chelekom into your projects and explore its full capabilities.
Yes, Mishka Chelekom comes with built-in animations for a smoother user experience. These animations are carefully designed to enhance interactions while maintaining performance. The animations include smooth transitions for expanding and collapsing sections, making the interface feel more responsive and polished.
Yes, Mishka Chelekom comes with a variety of built-in styles and theming options. You can customize colors, borders, padding, and other visual elements through props. The styling system is built on Tailwind CSS, making it highly flexible and easy to extend with your own custom styles. Dark mode is also supported out of the box.
Yes, Mishka Chelekom is fully accessible. We follow WAI-ARIA standards by implementing proper ARIA attributes, keyboard navigation, and comprehensive screen reader support. We regularly test for compatibility with popular screen readers including NVDA, VoiceOver, and JAWS to ensure a seamless experience for all users.
Yes, Mishka Chelekom comes with built-in animations for a smoother user experience. These animations are carefully designed to enhance interactions while maintaining performance. The animations include smooth transitions for expanding and collapsing sections, making the interface feel more responsive and polished.
Yes, Mishka Chelekom comes with a variety of built-in styles and theming options. You can customize colors, borders, padding, and other visual elements through props. The styling system is built on Tailwind CSS, making it highly flexible and easy to extend with your own custom styles. Dark mode is also supported out of the box.
Yes, Mishka Chelekom is fully accessible. We follow WAI-ARIA standards by implementing proper ARIA attributes, keyboard navigation, and comprehensive screen reader support. We regularly test for compatibility with popular screen readers including NVDA, VoiceOver, and JAWS to ensure a seamless experience for all users.
Mishka Chelekom focuses on developer experience and performance. Built with Phoenix Liveview, it offers a variety of components, and provides comprehensive documentation with regular updates.
Yes, Mishka Chelekom is highly customizable! You can implement your own styles using custom CSS classes through the class prop, or by overriding our default Tailwind styles. The component is built with flexibility in mind, making it easy to adapt to your specific design needs.
No, modifying styles is straightforward! You can easily customize the appearance using Tailwind CSS classes or your own custom styles through the class prop. The component's modular design makes it simple to adapt to your specific styling requirements.
You can see Getting Started page to learn how to integrate Mishka Chelekom into your projects and explore its full capabilities.

The Mishka Chelekom Accordion component also seamlessly integrates with Phoenix LiveView applications, offering enhanced interactivity. With this Phoenix LiveView component users can show or hide content effortlessly, while the module’s flexibility with colors and styles ensures that it fits within any design. Whether you’re adding icons, media, or simply dividing complex data into more manageable sections, the accordion component is a versatile solution for improving both functionality and user experience.

How to use Phoenix and LiveView accordion component

The Mishka Chelekom Accordion module includes a required :item slot, which defines each individual accordion entry. This slot gives you control over elements like the title, description, icons, and more, allowing for easy customization of your accordion items to suit your design and content needs. Each item has several attributes:

  • title (Required): Specifies the title of the accordion item, which is displayed when the accordion is closed.
  • description: A brief description that appears under the title, offering additional context.
  • icon: Adds an icon next to the title, enhancing visual representation.
  • image: Displays an image next to the title.
  • alt: The alternative text of the image. Describe the picture for screen reader users. Leave it out when the image only decorates the item: the image is then drawn with an empty alt and screen readers skip it.
  • open: A boolean that controls whether the accordion item is open true or closed false by default.
  • icon_class, icon_wrapper_class, image_class, trigger_class and content_class: Tailwind classes for the icon, the icon wrapper, the image, the clickable header and the panel content of that item.

You can check other props of this slot in the props tab.

How to use Phoenix and LiveView accordion component

Mishka Chelekom is an open-source UI kit for Phoenix and Phoenix LiveView, built with Tailwind CSS. It offers essential components like drawers, popovers, and accordions to help developers create responsive, interactive user interfaces effortlessly. Start building faster with our easy-to-follow guide, and optimize your Phoenix and LiveView projects with flexible, customizable components.
Mishka Chelekom is a powerful, open-source component library crafted for Phoenix and Phoenix LiveView. Developed using Tailwind CSS, it provides a wide range of UI components, including drawers, popovers, and accordions, to help streamline the creation of responsive, dynamic web applications. Boost your development process with our comprehensive guide and start building modern, interactive user interfaces for your Phoenix and LiveView projects effortlessly.
Select any icon from the Hero Icons website and add its name to the icon prop. The size of the icon can be adjusted using the icon_class prop in each slot.
Select any icon from the Hero Icons website and add its name to the icon prop. The size of the icon can be adjusted using the icon_class prop in each slot.
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->
<.accordion id="example">
  <:item
    id="item1"
    title="Custom Accordion Item one"
    description="Description of slot"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="item2"
    title="Custom Accordion Item two"
    description="Description of slot"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-one" initial_open={["icon1"]}>
  <:item
    id="icon1"
    title="Custom Accordion Item one"
    description="Description of slot"
    icon="hero-chat-bubble-left-right-solid"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="icon2"
    title="Custom Accordion Item two"
    description="Description of slot"
    icon="hero-chat-bubble-oval-left-ellipsis-solid"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Base & Base separated Variant

Base & Base separated Variant

Item one content
Item two content
Item one content
Item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="accordion-base" variant="base">
  <:item
    title="Tinted Split variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Tinted Split variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="accordion-base-separated" variant="base_separated">
  <:item
    title="Tinted Split variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Tinted Split variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Default Variant

The default variant includes basic styles with a background and borders, providing a clean and simple appearance. You can customize it with different color options, including natural, primary, secondary, success, warning, danger, info, silver, misc, and dawn to match your design needs.

Default Variant

Item one content
Item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-two" color="secondary">
  <:item
    id="sec1"
    title="Default variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="sec2"
    title="Default variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

outline Variant

The outline variant applies borders only with no background color, giving the component a clean and minimal look. You can customize the border colors with options like primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn.

outline Variant

outline variant item one content
outline variant item two content
outline variant item one content
outline variant item two content
outline variant item one content
outline variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-three" variant="outline">
  <:item
    id="out1"
    title="outline variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="out2"
    title="outline variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

bordered Variant

The bordered variant includes a background color and supports various customizable color options. You can customize the background colors with options like primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn.

bordered Variant

bordered variant item one content
bordered variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-four" variant="bordered">
  <:item
    id="bord1"
    title="bordered variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="bord2"
    title="bordered variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Outline separated Variant

The outline separated variant has a customizable border colors. You can customize the background colors with options like primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn.

Outline separated Variant

outline_separated variant item one content
outline_separated variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-five" variant="outline_separated">
  <:item
    id="osep1"
    title="outline_separated variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="osep2"
    title="outline_separated variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Bordered separated Variant

The bordered_separated variant includes both a background color and a border for each item, with space between them for a clean, structured layout. You can customize the background colors using options such as primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn.

Bordered separated Variant

Tinted split variant item one content
Tinted split variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-six" variant="bordered_separated">
  <:item
    id="bsep1"
    title="Bordered separated variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="bsep2"
    title="Bordered separated variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Transparent Variant

The transparent variant features transparent borders and background, with only the content's color changing. You can customize the content color using options such as primary, secondary, natural, success, warning, danger, info, silver, misc, and dawn. Each item maintains a clean, minimal layout with space between items.

Transparent Variant

Transparent variant item one content
Transparent variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-seven" variant="transparent">
  <:item
    id="trans1"
    title="Transparent variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="trans2"
    title="Transparent variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Shadow Variant

Shadow Variant

Shadow variant item one content
Shadow variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="accordion-shadow" variant="shadow">
  <:item
    title="Shadow variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Shadow variant item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Shadow variant item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Gradient Variant

Gradient Variant

Gradient variant item one content
Gradient variant item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="accordion-gradient" variant="gradient">
  <:item
    title="Gradient variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Gradient variant item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    title="Gradient variant item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Padding prop in Phoenix LiveView Accordion Component

The padding prop offers values such as extra_small, small, medium, large, and extra_large, allowing for flexible adjustment of the padding applied to the content and summary sections of the accordion. These padding options enable the creation of either compact or spacious layouts.

Padding prop in Phoenix LiveView Accordion Component

Extra Small padding item one content
Extra Small padding item two content
Small padding item one content
Small padding item two content
Medium padding item one content
Medium padding item two content
Large padding one content
Large padding two content
Extra Large padding one content
Extra Large padding two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-nine" padding="medium">
  <:item
    id="pad1"
    title="outline variant item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="pad2"
    title="outline variant item two"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Size prop in Phoenix LiveView Accordion Component

The size prop adjusts the text size of the accordion and uses Tailwind's text size classes to apply these changes. It offers values such as extra_small, small, medium, large, and extra_large.

Size prop in Phoenix LiveView Accordion Component

Size prop item one content
Size prop item two content
Size prop item one content
Size prop item two content
Size prop item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-ten" size="large">
  <:item
    id="size1"
    title="Size prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="size2"
    title="Size prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    id="size3"
    title="Size prop item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Space prop

The space prop is designed for the outline_separated and bordered_separated variants. It controls the space between each accordion item, helping to create a more organized and distinct layout, ensuring that items remain clearly outline_separated. It offers values such as extra_small, small, medium, large, and extra_large.

Space prop

Space prop item one content
Space prop item two content
Space prop item one content
Space prop item two content
Space prop item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-11" space="large">
  <:item
    id="space1"
    title="Space prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="space2"
    title="Space prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    id="space3"
    title="Space prop item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Rounded prop

The rounded prop offers values like extra_small, small, medium, large, and extra_large. These values control the border radius of the accordion items, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

Rounded prop

Rounded prop item one content
Rounded prop item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-12" rounded="small">
  <:item
    id="round1"
    title="Rounded prop item one"
  >
   <!--Content goes here-->
  </:item>

  <:item
    id="round2"
    title="Rounded prop item two"
  >
    <!--Content goes here-->
  </:item>

  <:item
    id="round3"
    title="Rounded prop item three"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Media size prop

The media_size prop allows control over the width and height of media elements, such as images, in the summary section of the accordion. It accepts values like extra_small, small, medium, large, and extra_large. Passing the media_size prop to the .accordion will apply the specified size to all images in the item slots, ensuring consistent image dimensions across the accordion. Each item's alt is written on its image; an image with no alt is drawn with alt="", which tells screen readers to skip it.

Media size prop

Media size prop item one content
Media size prop item two content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-13" media_size="extra_small">
  <:item
    title="Media size prop item one"
    image="/path/to/image"
    alt="User avatar"
  >
   <!--Content goes here-->
  </:item>

  <:item
    title="Media size prop item two"
    image="/path/to/image"
    alt="User avatar"
  >
    <!--Content goes here-->
  </:item>
</.accordion>

Chevron props

The chevron_icon prop allows customization of the accordion's chevron icon using LiveView Hero Icons. Additionally, options like left_chevron, right_chevron, and hide_chevron enable control over the chevron’s position or visibility. By default, the chevron icon is positioned on the right; left_chevron and chevron_position="left" move it to the left.

Chevron props

Icon chevron
Icon chevron
Left chevron item one content
Left chevron item two content
Hide chevron content
Hide chevron content
heex
<!-- an id is optional; set a unique one on each .accordion to keep the id stable -->

<.accordion id="example-14" chevron_icon="hero-cog-8-tooth">
  <:item
    id="chev1"
    title="Chevron prop item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-15" left_chevron>
  <:item
    id="chev2"
    title="Left chevron item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

<.accordion id="example-16" hide_chevron>
  <:item
    id="chev3"
    title="Hide chevron item one"
  >
   <!--Content goes here-->
  </:item>
</.accordion>

One item open at a time

An accordion keeps one item open by default: opening an item closes the one that was open. Set multiple to let several stay open, duration to change the open and close animation, in milliseconds (200 by default), and collapsible={false} to stop the last open item from being closed. Every header is a button that carries aria-expanded, and Arrow Up, Arrow Down, Home and End move focus between the headers.

One item open at a time

Opening the second item closes this one.
Opening the first item closes this one.
heex
<.accordion id="faq" variant="bordered">
  <:item title="First item">Opening the second item closes this one.</:item>
  <:item title="Second item">Opening the first item closes this one.</:item>
</.accordion>

<.accordion id="faq-many" variant="bordered" multiple duration={300}>
  <:item title="First item">Several items can stay open.</:item>
  <:item title="Second item">Open this one as well.</:item>
</.accordion>

Multiple Items with Initial Open State

The accordion can handle multiple items with specific ones open initially. Use the initial_open prop to specify which items should be open when the component mounts, or set open={expr} on individual items.

Multiple Items with Initial Open State

This is the first accordion item that is initially open. It demonstrates how you can have specific items expanded when the accordion loads.
This item starts closed and can be opened by clicking the trigger. The accordion supports multiple items being open simultaneously.
This is another initially open item. You can specify multiple items to be open by including their IDs in the initial_open array.
This final item demonstrates the complete flexibility of the accordion component with multiple items and mixed initial states.
heex
<!-- Multiple items with initial open state -->
<.accordion
  id="example-multiple-open"
  variant="bordered_separated"
  color="primary"
  multiple={true}
  initial_open={["item1", "item3"]}
>
  <:item
    id="item1"
    title="First Item (Initially Open)"
    icon="hero-document-text"
  >
   This is the first accordion item that is initially open.
  </:item>

  <:item
    id="item2"
    title="Second Item (Initially Closed)"
    icon="hero-cog-6-tooth"
  >
    This item starts closed and can be opened by clicking.
  </:item>

  <:item
    id="item3"
    title="Third Item (Initially Open)"
    icon="hero-star"
  >
    This is another initially open item.
  </:item>

  <:item
    id="item4"
    title="Fourth Item (Initially Closed)"
    icon="hero-heart"
  >
    This final item demonstrates the complete flexibility.
  </:item>
</.accordion>

Server Events Integration

Enable server-side event handling by setting server_events={expr}. This allows your LiveView to respond to accordion open/close events, perfect for analytics, state synchronization, or triggering server-side actions. The events go to the LiveComponent that renders the accordion, or to the LiveView when the accordion is not inside one.

The example below is drawn live, but nothing on this page handles accordion-handler, so the events it sends are ignored. The code ends with the clause that receives them.

Server Events Integration

When this item is opened or closed, an event is sent to the LiveView server. This is useful for tracking user behavior, updating analytics, or synchronizing state across components.
Server events enable real-time features like sending notifications, updating databases, or triggering other LiveView processes when users interact with the accordion.
Perfect for maintaining consistent state across multiple users or components. The server receives detailed information about which items are open or closed.
heex
<!-- Server events integration -->
<.accordion
  id="server-events-accordion"
  variant="outline_separated"
  color="info"
  server_events={true}
  event_handler="accordion-handler"
  space="medium"
>
  <:item
    id="analytics"
    title="Analytics Tracking"
    description="Track user interactions with server events"
    icon="hero-chart-bar"
  >
   When this item is opened or closed, an event is sent to the LiveView server.
  </:item>

  <:item
    id="notifications"
    title="Real-time Notifications"
    description="Trigger server actions on accordion interactions"
    icon="hero-bell"
  >
    Server events enable real-time features like notifications and updates.
  </:item>

  <:item
    id="sync"
    title="State Synchronization"
    description="Keep server and client state in sync"
    icon="hero-arrow-path"
  >
    Perfect for maintaining consistent state across components.
  </:item>
</.accordion>

# In the LiveView or LiveComponent that renders the accordion
def handle_event("accordion-handler", %{"open_ids" => open_ids}, socket) do
  {:noreply, assign(socket, :open_items, open_ids)}
end