Accordion

The Accordion component lets users show and hide sections of related content on a page. It is intended to save vertical space by hiding content, reducing scrolling.

Preview

Usage

The accordion uses a custom hook useAccordion, for the collapsible functionality.

npm i react-hartan 

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:

{
    question: "", 
    answer: "" 
}

NOTE: Keep the name of the keys same as above.

• 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

Default

import { Accordion } from "react-hartan"

function App() {

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

export default App

With Custom Props

Component Code

This is the code for the Accordion component.

Accordion.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
};

Accordion.module.css