How to create collapsible onclick of div in Reactjs? - reactjs

Question

How to make collapsible onclick of <div className="content-header"> in Reactjs
As I am beginner in Reactjs how can I create a function that will handle onclick div section to make that collapsible
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="main">
<div className="content">
<div className="content-header">
<p>STEM</p>
</div>
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>
</div>
<div className="content">
<div className="content-header">
<p>STEM</p>
</div>
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>
</div>
</div>
);
}
This is how it look like

Answer 1

import React from "react";
import "./styles.css";
export default function App() {
const [isShowBody, setIsSHowBody] = React.useState(false);
const onClickHandler = () => {
setIsSHowBody(isShowBody => !isShowBody);
}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={onClickHandler}>
<p>STEM</p>
</div>
{ isShowBody && <div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>}
</div>
</div>
);
}

Answer 2

try :
import {React,useState} from "react";
import "./styles.css";
export default function App() {
const [open,setOpen] = useState(false);
const toggle = () => {setOpen(!open)}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={toggle}>
<p>STEM</p>
</div>
{open?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
</div>
</div>
);
}
if you have multiple, you have to use open array :
import {React,useState} from "react";
import "./styles.css";
export default function App() {
const [open,setOpen] = useState([false,false,false]);
const toggle = (i) => {let copyOpen = open; open[i] = !open[i] ;setOpen(copyOpen)}
return (
<div className="main">
<div className="content">
<div className="content-header" onClick={()=>toggle(0)}>
<p>STEM</p>
</div>
{open[0]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
<div className="content-header" onClick={()=>toggle(1)}>
<p>STEM</p>
</div>
{open[1]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
<div className="content-header" onClick={()=>toggle(2)}>
<p>STEM</p>
</div>
{open[2]?
<div className="content-body">
I am a STEM
<br></br>
I am STEM
</div>:null
}
</div>
</div>
);
}