Make accordion animation in React TS

import React, { useState } from "react";
import { motion } from 'framer-motion';

const AccordionItem = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{title}</button>
      <motion.div animate={isOpen ? { height: 'auto' } : { height: 0 }} transition={{ duration: 0.3, ease: 'easeOut' }}>
        {children}
      </motion.div>
    </div>
  );
};

const Accordion = () => {
  return (
    <div>
      <AccordionItem title="Section 1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </AccordionItem>
      <AccordionItem title="Section 2">
        <p>Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Maecenas malesuada porttitor ligula eget lacinia.</p>
      </AccordionItem>
      <AccordionItem title="Section 3">
        <p>Phasellus id semper risus. Maecenas lectus nisi, blandit ac tincidunt vitae, semper sed tellus. Aenean leo ligula, porttitor eu consequat vitae, eleifend ac eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      </AccordionItem>
    </div>
  );
};

export default Accordion;

 

This example uses the Framer Motion library for the animation, which is a popular library for creating animations in React. The motion.div component is used to wrap the content of each accordion item, and the animate prop is used to specify the animation that should be applied to the div. The isOpen state variable is used to control whether the div is open or closed, and the transition prop is used to specify the duration and easing of the animation.

import React, { useState } from "react";
import "./accordion.css";

const Accordion = () => {
  const [activeIndex, setActiveIndex] = useState(-1);

  const handleClick = (index) => {
    if (activeIndex === index) {
      setActiveIndex(-1);
    } else {
      setActiveIndex(index);
    }
  };

  return (
    <div className="accordion-container">
      <div className="accordion-item" onClick={() => handleClick(0)}>
        <h3 className="accordion-header">Section 1</h3>
        <div className={`accordion-body ${activeIndex === 0 ? "active" : ""}`}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            congue, lectus ut aliquam mattis, risus urna finibus mauris, sed
            pellentesque neque turpis eget lectus.
          </p>
        </div>
      </div>
      <div className="accordion-item" onClick={() => handleClick(1)}>
        <h3 className="accordion-header">Section 2</h3>
        <div className={`accordion-body ${activeIndex === 1 ? "active" : ""}`}>
          <p>
            Morbi luctus sollicitudin laoreet. Phasellus consectetur tristique
            tellus ut auctor. Morbi et ligula pellentesque, ultricies lectus
            in, tristique elit. Maecenas elementum congue nunc non mattis.
          </p>
        </div>
      </div>
      <div className="accordion-item" onClick={() => handleClick(2)}>
        <h3 className="accordion-header">Section 3</h3>
        <div className={`accordion-body ${activeIndex === 2 ? "active" : ""}`}>
          <p>
            Proin iaculis euismod arcu. Vestibulum quis ex semper, consectetur
            vitae fermentum quis, accumsan arcu. In sed pulvinar ante. Nunc
            vitae turpis auctor, eleifend quam non, fermentum diam.
          </p>
        </div>
      </div>
    </div>
  );
};

export default Accordion;

/* Styles for the accordion component */
.accordion-container {
  max-width: 600px;
  margin: 0 auto;
}

.accordion-item {
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.accordion-header {
  padding: 16px;
  cursor: pointer;
  background-color: #efefef;
}

.accordion-header:hover {
  background-color: #e6e6e6;
}

.active {
  display: block;
}

.accordion-body {
  padding: 16px;
  display: none;
}

1. Accordion Component:

import React, { useState } from "react";

const Accordion: React.FC<{ title: string; content: string }> = ({
  title,
  content,
}) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="accordion">
      <div className="accordion-header" onClick={() => setIsOpen(!isOpen)}>
        <h2>{title}</h2>
        <span>{isOpen ? "-" : "+"}</span>
      </div>
      {isOpen && <div className="accordion-content">{content}</div>}
    </div>
  );
};

export default Accordion;




2. Usage:

import React from "react";
import Accordion from "./Accordion";

const App: React.FC = () => {
  return (
    <div className="app">
      <Accordion title="Question 1" content="Answer 1" />
      <Accordion title="Question 2" content="Answer 2" />
      <Accordion title="Question 3" content="Answer 3" />
    </div>
  );
};

export default App;




3. CSS Styles:

.accordion {
border: 1px solid #eee;
margin-bottom: 10px;
}

.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
cursor: pointer;
}

.accordion-content {
display: none;
padding: 10px;
}

.accordion-open .accordion-content {
display: block;
}

This code creates a simple accordion component that can be used to display collapsible content. The Accordion component takes two props: title and content. The title prop specifies the title of the accordion section, and the content prop specifies the content that will be displayed when the section is open.

The isOpen state variable is used to track whether the accordion section is open or closed. The onClick event handler on the accordion-header div toggles the isOpen state, which causes the accordion-content div to appear or disappear.

The CSS styles define the layout and appearance of the accordion component. The accordion class defines the overall style of the accordion, including the border and margin. The accordion-header class defines the style of the accordion header, including the padding and cursor. The accordion-content class defines the style of the accordion content, including the padding and display property. The accordion-open class is added to the accordion div when the accordion section is open, and it displays the accordion-content div.

 

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="container">
      <div className="accordion">
        <h2 onClick={toggleAccordion}>Accordion Title</h2>
        <div className={isOpen ? "content show" : "content"}>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
            feugiat dui ac augue egestas, eu tristique mauris aliquet. Nunc
            sagittis mauris nec elit euismod, non auctor purus tincidunt. Nunc
            mattis nisi eu magna sagittis, nec vulputate felis malesuada.
          </p>
          <p>
            Donec sed augue vitae orci efficitur ultricies. Suspendisse odio
            lectus, varius a ullamcorper eget, iaculis eu nibh. Suspendisse
            gravida dui eu tellus rutrum, ut dapibus nisl luctus. Nunc vitae
            ipsum at quam laoreet efficitur. Proin elementum finibus
            condimentum. Suspendisse bibendum pellentesque leo vitae ultricies.
          </p>
        </div>
      </div>
    </div>
  );
};

export default App;




In this example, the Accordion component uses a useState hook to manage the state of the accordion, specifically whether it is open or closed. The toggleAccordion function is used to change the state of the accordion when the title is clicked. The content div is rendered conditionally based on the state of the accordion, with the show class added when the accordion is open. The styles for the accordion are defined in the styles.css file.

1. Import the necessary libraries.

import React, { useState } from "react";
import { Accordion, AccordionDetails, AccordionSummary } from "@material-ui/core";
import { ExpandMoreIcon } from "@material-ui/icons";




2. Create a state variable to store the active accordion panel.

const [activePanel, setActivePanel] = useState<string | null>(null);




3. Create a function to handle the accordion panel expansion.

const handlePanelExpansion = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
  setActivePanel(isExpanded ? panel : null);
};




4. Render the accordion.

return (
  <Accordion active={activePanel === "panel1"} onChange={handlePanelExpansion("panel1")}>
    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
      <p>Accordion Panel 1</p>
    </AccordionSummary>
    <AccordionDetails>
      <p>Accordion Panel 1 Content</p>
    </AccordionDetails>
  </Accordion>
);

5. Repeat steps 3 and 4 for each accordion panel.

The above example uses the Material-UI library for React. You can also use other libraries or implement your own accordion animation using CSS transitions.

To create an accordion animation in React TypeScript, you can use a variety of approaches, including using CSS animations, JavaScript libraries, or a combination of both. Here are a few examples:

1. Using CSS Animations:

This involves using CSS transitions and animations to create the accordion effect.

Example:

import React, { useState } from "react";
import "./styles.css";

const Accordion = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="accordion">
      <div className="accordion-header" onClick={toggleAccordion}>
        Click to open/close
      </div>
      <div className={`accordion-content ${isOpen ? "open" : "closed"}`}>
        Content goes here...
      </div>
    </div>
  );
};

export default Accordion;

In this example, we use the useState hook to track the state of the accordion (open or closed). The toggleAccordion function is used to change the state of the accordion. The CSS styles are defined in a separate .css file, where the open and closed classes define the animations for the accordion.

2. Using JavaScript Libraries:

There are several JavaScript libraries that can be used to create accordion animations. One popular library is Reactstrap, which provides a component called Accordion.

Example:

import React from "react";
import { Accordion, AccordionItem } from "reactstrap";

const AccordionExample = () => {
  return (
    <Accordion>
      <AccordionItem>
        <AccordionItemHeading>Accordion Item 1</AccordionItemHeading>
        <AccordionItemBody>Content goes here...</AccordionItemBody>
      </AccordionItem>
      <AccordionItem>
        <AccordionItemHeading>Accordion Item 2</AccordionItemHeading>
        <AccordionItemBody>Content goes here...</AccordionItemBody>
      </AccordionItem>
    </Accordion>
  );
};

export default AccordionExample;

In this example, we use the `Accordion` and AccordionItem components from Reactstrap to create an accordion. Each AccordionItem represents a single accordion item with a heading and a body.

3. Using a Combination of CSS and JavaScript:

You can also combine CSS animations with JavaScript to create more complex accordion animations. For example, you could use CSS to define the basic animation and use JavaScript to control the timing and behavior of the animation.

Example:

import React, { useState, useEffect } from "react";
import "./styles.css";

const Accordion = () => {
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    const accordionContent = document.querySelector(".accordion-content");
    if (isOpen) {
      accordionContent.style.maxHeight = accordionContent.scrollHeight + "px";
    } else {
      accordionContent.style.maxHeight = "0px";
    }
  }, [isOpen]);

  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="accordion">
      <div className="accordion-header" onClick={toggleAccordion}>
        Click to open/close
      </div>
      <div className={`accordion-content ${isOpen ? "open" : "closed"}`}>
        Content goes here...
      </div>
    </div>
  );
};

export default Accordion;

In this example, we use the useEffect hook to control the animation. The maxHeight property of the accordion content is set dynamically based on the state of the accordion. This allows us to create a smooth accordion animation using a combination of CSS and JavaScript.

The specific approach you choose will depend on your requirements and preferences.

Sure, here's how you can create an accordion animation in React TS:

1. Import the necessary libraries:

import React, { useState } from 'react';
import { motion } from 'framer-motion';

2. Create a component for the accordion item:

const AccordionItem = ({ title, children }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div className="accordion-item">
      <div className="accordion-title" onClick={toggle}>
        {title}
      </div>
      <motion.div
        className="accordion-content"
        initial={{ height: 0, opacity: 0 }}
        animate={{ height: isOpen ? 'auto' : 0, opacity: isOpen ? 1 : 0 }}
        transition={{ duration: 0.3, ease: 'easeOut' }}
      >
        {children}
      </motion.div>
    </div>
  );
};




3. Create a component for the accordion:

const Accordion = ({ children }) => {
  return (
    <div className="accordion">
      {children}
    </div>
  );
};

4. Use the components in your main React component:

const App = () => {
  return (
    <Accordion>
      <AccordionItem title="Section 1">
        This is the content for section 1.
      </AccordionItem>
      <AccordionItem title="Section 2">
        This is the content for section 2.
      </AccordionItem>
      <AccordionItem title="Section 3">
        This is the content for section 3.
      </AccordionItem>
    </Accordion>
  );
};

export default App;

This code will create an accordion with three sections. When you click on the title of a section, the content will slide down smoothly.

You can customize the look and feel of the accordion by editing the CSS styles in your project.

Here's a working example of the code: https://codesandbox.io/s/framer-motion-accordion-react-ts-l5zd6?file=/src/App.tsx

I hope this helps! Let me know if you have any other questions.