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

// 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

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

/* Accordion Style */

/* 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;
    }
}