# 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](https://hartans-organization.gitbook.io/hartan-docs/hooks/useaccordion), 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 %}