# Accordion

<figure><img src="https://raw.githubusercontent.com/akkshayTandon/react-hartan/main/images/accordion.png" alt="" width="375"><figcaption><p>Preview</p></figcaption></figure>

### Usage

The accordion uses a custom hook [useAccordion](/hartan-docs/hooks/useaccordion.md), for the collapsible functionality.

> ```bash
> npm i react-hartan 
> ```

```jsx
import { Accordion } from "react-hartan"

function App() {

  return (
    <>
      <Accordion></Accordion>
    </>
  )
}

export default App
```

### Customization With Props

* **`accordionList`** -> This prop is required to be sent by the user. It accepts an **array of objects,** where each element is an object of the structure:

```javascript
{
    question: "", 
    answer: "" 
}
```

{% hint style="info" %}
NOTE:  Keep the name of the keys same as above.
{% endhint %}

* `id` -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.
* **`userAccordionStyle`**  -> The custom styling prop which accepts class name(s) for the full accordion section/component.
* **`userAccordionBoxStyle`**  -> The custom styling prop which accepts class name(s) for each accordion label containing both the visible and hidden parts.
* **`userAccordionTitleStyle`**  -> The custom styling prop which accepts class name(s) for only the visible part inside an accordion label.
* **`userAccordionQuesStyle`**  -> The custom styling prop which accepts class name(s) for the question text inside the visible title part of each accordion label.
* **`userAccordionSignStyle`**  -> The custom styling prop which accepts class name(s) for the sign used to show/hide hidden text inside the visible title part of each accordion label.
* **`userAccordionContentHideStyle`**  -> The custom styling prop which accepts class name(s) for the hidden content inside each accordion label when it's not shown.
* **`userAccordionContentShowStyle`**  -> The custom styling prop which accepts class name(s) for the hidden content inside each accordion label when it becomes visible.

#### Example

{% tabs %}
{% tab title="Default" %}
{% code overflow="wrap" %}

```jsx

import { Accordion } from "react-hartan"

function App() {

  return (
    <>
      <Accordion></Accordion>
    </>
  )
}

export default App
```

{% endcode %}
{% endtab %}

{% tab title="With Custom Props" %}
{% code overflow="wrap" %}

```jsx
// App.css
.my-class{
   font-size: 2rem;
   background-color: red;
}

// App.jsx
import { Accordion } from "react-hartan"

const list = [
    {
        question: "Qustion 1",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    },
    {
        question: "Qustion 2",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    }
];

function App() {

  return (
    <>
      <Accordion accordionList={list} userAccordionBoxStyle={"my-class"}></Accordion>
    </>
  )
}

export default App
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Component Code

This is the code for the Accordion component.

{% tabs %}
{% tab title="Accordion.jsx" %}
{% code overflow="wrap" %}

```jsx
import accordionStyle from "./Accordion.module.css"
import useAccordion from "../../Hooks/Accordion"
import PropTypes from "prop-types"

const list = [
    {
        question: "Qustion 1",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    },
    {
        question: "Qustion 2",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    },
    {
        question: "Qustion 3",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    },
    {
        question: "Qustion 4",
        answer: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, saepe rerum quibusdam ullam magnam ipsam eligendi officia minus laboriosam temporibus!",
    },
];

const symbolButtons = {
    openSymbol: "+",
    closeSymbol: "-"
};

export default function Accordion({ accordionList = list, symbols = symbolButtons, id, userAccordionStyle, userAccordionBoxStyle, userAccordionTitleStyle, userAccordionQuesStyle, userAccordionSignStyle, userAccordionContentShowStyle, userAccordionContentHideStyle }) {

    const [openAccordion, toggle] = useAccordion(null);

    return (
        <section className={`${userAccordionStyle}`}>
            {
                accordionList.map((data, id) => {
                    return (
                        <div key={id} className={`${accordionStyle.accordionBox} ${userAccordionBoxStyle}`}>
                            <div className={`${accordionStyle.accordionTitle} ${userAccordionTitleStyle}`}
                                onClick={() => toggle(id)} >
                                <span className={`${accordionStyle.accordionQues} ${userAccordionQuesStyle}`}>{data.question}</span>
                                <span className={`${accordionStyle.accordionSign} ${userAccordionSignStyle}`}>{openAccordion == id ? symbols.closeSymbol : symbols.openSymbol}</span>
                            </div>
                            <div className={openAccordion == id ? `${accordionStyle.accordionContentHide} ${accordionStyle.accordionContentShow} ${userAccordionContentShowStyle}` : `${accordionStyle.accordionContentHide} ${userAccordionContentHideStyle}`}>{data.answer}</div>
                        </div>
                    )
                })
            }
        </section>
    )
}

Accordion.propTypes = {
    accordionList: PropTypes.arrayOf(PropTypes.shape({
        question: PropTypes.node,
        answer: PropTypes.node
    })),
    symbols: PropTypes.shape({
        openSymbol: PropTypes.string,
        closeSymbol: PropTypes.string
    }),
    id: PropTypes.string,
    userAccordionStyle: PropTypes.string,
    userAccordionBoxStyle: PropTypes.string,
    userAccordionTitleStyle: PropTypes.string,
    userAccordionQuesStyle: PropTypes.string,
    userAccordionSignStyle: PropTypes.string,
    userAccordionContentShowStyle: PropTypes.string,
    userAccordionContentHideStyle: PropTypes.string
};
```

{% endcode %}
{% endtab %}

{% tab title="Accordion.module.css" %}

<pre class="language-css"><code class="lang-css"><strong>/* Accordion Style */
</strong>
/* Each Accrodion Box */
.accordionBox {
    background-color: #1e90ff;
    margin: .5rem 0;
    padding: 1rem 2rem;
    border-radius: .75rem;
    width: 50rem;
}

/* A div inside each accordion box */
.accordionTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;

}

/* Question Text inside each accordion box */
.accordionQues {
    font-size: 2rem;
    font-weight: 500;
}

/* Sign button inside each accordion box */
.accordionSign {
    font-size: 2.5rem;
    font-weight: 500;
}

/* Hidden Content Styling */
.accordionContentHide {
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff;
    overflow: hidden;
    max-height: 0;
    transition: all .5s cubic-bezier(0, 1, 0, 1);
}

/* Hidden Content Styling when visible */
.accordionContentHide.accordionContentShow {
    height: auto;
    max-height: 999px;
    transition: all .5s cubic-bezier(1, 0, 1, 0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .accordionBox {
        width: 20rem;
    }
}
</code></pre>

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hartans-organization.gitbook.io/hartan-docs/components/accordion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.