# Simple block: Accordion

https://www.sanity.io/learn/course/editorialized-ecommerce-experiences/simple-block-accordion.md

null

An "accordion" block is useful to display content such as frequently asked questions or terms and conditions.

## Prepare your content

In the Studio, add an Accordion item with the following two groups to the Body field with the following text:

```text
What's the best way to take care of Jesmonite?

To clean any Jesmonite products, wipe down with a non-abrasive damp cloth. We coat our products with a waterproof sealant, but please do not leave Jesmonite to soak.
```

```text
Is Jesmonite safe to eat from?

Whilst Jesmonite is a non-toxic, environmentally friendly material, we don’t recommend eating off the products, but can be used to serve dry things like nuts or whole fruit or to protect surfaces from hot pots & plates.
```

## Prepare your front end

Thankfully, HTML gives us details and summary tags to natively show and hide content. All we need to do is to render our Sanity content into the correct tags.

Take note also in the component below how the imported `PortableText` component handles the array of objects that field creates, and renders HTML.

1. **Create** a new file to your Hydrogen project

```tsx:./app/components/AccordionBlock.tsx
import {PortableText} from '@portabletext/react';
import type {Accordion} from '~/sanity/sanity.types';

export function AccordionBlock(props: Accordion) {
  return Array.isArray(props.groups) ? (
    <div className="flex flex-col bg-blue-50 divide-y divide-blue-100">
      {props.groups.map((group) => (
        <details key={group._key} className="p-4 w-full max-w-lg mx-auto">
          <summary className="font-bold py-2">{group.title}</summary>
          {Array.isArray(group.body) ? (
            <PortableText value={group.body} />
          ) : null}
        </details>
      ))}
    </div>
  ) : null;
}
```

1. Take note of how _defensive coding_ practices check any value is not `null` before attempting to render it. This is especially useful when your front end leverages Visual Editing and you are viewing incomplete, draft documents.

To render this block, add it to the `BLOCKS` object back in the page route.

1. **Update** `BLOCKS` in the page route

```typescript:./app/routes/$slug.tsx
import {AccordionBlock} from '~/components/AccordionBlock';

const BLOCKS: Record<string, (props: any) => JSX.Element | null> = {
  accordion: AccordionBlock,
  _unknown: (props: any) => <>{JSON.stringify(props)}</>,
};
```

You should now see styled, collapsible drop downs for the accordion block type in your Hydrogen project.

Now you've got a handle on taking an array of block content created in Sanity and rendering them in Hydrogen, let's take on something a little more advanced.

### A note on reusable content

If your accordion is being used for FAQ's, and those FAQ's may be relevant in multiple locations – you should consider creating a dedicated `faq` document type and making this accordion block an array of references.