actions

Accordion

A vertically stacked set of interactive disclosures that each reveal an associated section of content.

Features

Keyboard accessible
Customizable
Multiple sizes
Themes ready

Links

Open in playground Open in Storybook View source ARIA authoring

Are competitor reviews included?

Yes, they are. Wonderflow extracts insights from your competitors' public data too. If a competitor's public feedback is not currently in our Feedback data lake you can request it and it will be added.

What is so special about your NLP analysis?

Well, it is our specialty. We have the most granular and performing ontologies for your industry, ready to be used, without any manual configuration needed on your side. On average, our VoC analysis covers 100 to 150 topics for each product category (3X more granular than any other platform) organized in a multilevel hierarchy, so that you can explore them from most generic ones to more specifics. For each topic, our artificial intelligence can determine its sentiment on a 3-level scale: positive, negative, neutral (used when a topic appears in a question, say coming from a customer support ticket).

Does Wonderflow integrate with other solutions?

By design, Wonderflow can integrate all pre-existing feedback solutions (like Medallia, Sprinklr, Salesforce, Bazaarvoice, etc.) that your company uses to manage customer feedback. Wonderflow can eventually setup custom integration (both in and out) using API.

Anatomy

import { Accordion, AccordionItem } from "@wonderflow/react-components";

export default () => {
  return (
    <Accordion defaultOpen="1" showSeparators>
      <AccordionItem value="1" summary="Item 1">
        <p>Content 1</p>
      </AccordionItem>
      <AccordionItem value="2" summary="Item 2">
        <p>Content 2</p>
      </AccordionItem>
      <AccordionItem value="3" summary="Item 3">
        <p>Content 3</p>
      </AccordionItem>
    </Accordion>
  );
};

tsx

API Reference

Accordion

PROPERTY

TYPE

DEFAULT

defaultOpen

string

showSeparators

boolean

false

AccordionItem

PROPERTY

TYPE

DEFAULT

value*

string

summary*

ReactNode

padding

boolean

true

contentMaxHeight

string

dimension

enum

"regular"

iconPosition

enum

"left"

Accessibility

Adheres to the disclosure role requirements.

Name	Description
`tab`	Move focus on the next element or outside the component
`enter`	Expand or collapse the selected item