SvelteHow-ToBeginner · 3 min read

How to Create Accordion in Svelte: Simple Step-by-Step Guide

To create an accordion in Svelte, use a reactive variable to track the open section and toggle it on click. Use conditional rendering with {#if} blocks to show or hide content inside each accordion item.

📐

Syntax

An accordion in Svelte typically uses a reactive variable to track which section is open. You use on:click to toggle the open state and {#if} blocks to conditionally show content.

let open = null; declares the open section index.
on:click={() => open = open === i ? null : i} toggles the clicked section.
{#if open === i} shows content only if the section is open.

svelte

let open = null;

{#each items as item, i}
  <div on:click={() => open = open === i ? null : i}>
    <h3>{item.title}</h3>
    {#if open === i}
      <p>{item.content}</p>
    {/if}
  </div>
{/each}

💻

Example

This example shows a simple accordion with three sections. Clicking a section header toggles its content. Only one section can be open at a time.

svelte

<script>
  let open = null;
  const items = [
    { title: 'Section 1', content: 'Content for section 1.' },
    { title: 'Section 2', content: 'Content for section 2.' },
    { title: 'Section 3', content: 'Content for section 3.' }
  ];
</script>

<style>
  div {
    border: 1px solid #ccc;
    margin-bottom: 0.5rem;
    border-radius: 4px;
  }
  h3 {
    margin: 0;
    padding: 0.5rem;
    background: #eee;
    cursor: pointer;
  }
  p {
    margin: 0;
    padding: 0.5rem;
  }
</style>

{#each items as item, i}
  <div>
    <h3 on:click={() => open = open === i ? null : i}>{item.title}</h3>
    {#if open === i}
      <p>{item.content}</p>
    {/if}
  </div>
{/each}

Output

Three clickable headers labeled 'Section 1', 'Section 2', and 'Section 3'. Clicking a header toggles the paragraph below it showing that section's content. Only one section's content is visible at a time.

⚠️

Common Pitfalls

Common mistakes when creating accordions in Svelte include:

Not toggling the open state correctly, causing multiple sections to stay open.
Forgetting to use {#if} blocks, which leads to all content showing at once.
Not updating the reactive variable properly, so UI does not update.

Always toggle the open index by comparing it to the clicked section index.

svelte

/* Wrong: This keeps all sections open */
{#each items as item}
  <div>
    <h3 on:click={() => open = true}>{item.title}</h3>
    {#if open}
      <p>{item.content}</p>
    {/if}
  </div>
{/each}

/* Right: Toggle open index to allow only one open */
{#each items as item, i}
  <div>
    <h3 on:click={() => open = open === i ? null : i}>{item.title}</h3>
    {#if open === i}
      <p>{item.content}</p>
    {/if}
  </div>
{/each}

📊

Quick Reference

open: reactive variable to track open section index or null.
on:click: event to toggle open state.
{#if}: conditional block to show content only when open.
{#each}: loop through accordion items.

✅

Key Takeaways

Use a reactive variable to track which accordion section is open.

Toggle the open section index on header click to open or close sections.

Use Svelte's {#if} block to conditionally render the content of the open section.

Only one accordion section should be open at a time for clear UI.

Avoid setting open to a boolean; use the section index or null for toggling.