How to Create a Smooth Slide Toggle with ReactJS

Question

Can we create a Smooth SlideToggle with ReactJS like this https://www.w3schools.com/jquery/jquery_slide.asp Also please refer: http://jsfiddle.net/rFn5v/3/ I have seen too many tutorials and every one is using states to do the slide toggle function and it is not smooth. Anyone who can help me to give a right answer on it will be much appreciated. Thanks in Advance!

Answer 1

You can use state to show and hide slides : I have a list of slides in my App component:

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

export default function App() {
  return (
    <>
      <SlideShow header="Header1" body="stuff 1" />
      <SlideShow header="Header2" body="stuff 2" />
      <SlideShow header="Header3" body="stuff 3" />
    </>
  );
}

and in each of the SlideShow : by changing the value of show, the slide opens and closes

function SlideShow({ header, body }) {
  const [show, setShow] = useState(false);
  const showStyle = {
    height: "auto"
  };
  const hideStyle = {
    height: "0",
    paddingTop: "0",
    paddingBottom: "0"
  };
  return (
    <div className="header" onClick={() => setShow(!show)}>
      {header}
      <div id="first" className="content" style={show ? showStyle : hideStyle}>
        {body}
      </div>
    </div>
  );
}

and css code :

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.header {
  cursor: pointer;
  background: lightblue;
  overflow: hidden;
}
.content {
  background: lightgreen;
  color: white;
  padding: 20px;
  transition: 0.5s all;
  box-sizing: content-box;
}

you can see demo online