I would like to Expand/Collapse all using a single button click.
Created a new ponent CollapsiblePanel using reactstrap and using the created ponent in the container(index.js).
Now I can able to expand/collapse all the containers on clicking the button.
CollapsiblePanel.js
import React, { useState, useEffect } from "react";
import { Collapse } from "reactstrap";
function CollapsiblePanel({ children, ...props }) {
const { title, collapse } = props;
const [isCollapse, setIsCollapse] = useState(collapse);
const [icon, setIcon] = useState("fa fa-chevron-down");
const toggle = () => {
setIsCollapse(!isCollapse);
setIcon(state => {
return state === "fa fa-chevron-down"
? "fa fa-chevron-right"
: "fa fa-chevron-down";
});
};
useEffect(() => {
toggle();
}, [collapse]);
return (
<div className="coll-panel">
<button
type="button"
className="coll-panel-btn btn-primary btn-block text-left"
onClick={() => toggle()}
>
<i className={icon} /> {title}
</button>
<Collapse className="border text-left p-2" isOpen={isCollapse}>
{children}
</Collapse>
</div>
);
}
CollapsiblePanel.defaultProps = {
children: "Add node as a child",
title: "Collapsible Panel",
collapse: true
};
export default CollapsiblePanel;
index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import CollapsiblePanel from "./ponent/CollapsiblePanel";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
function App() {
const text =
"Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
const [collapse, setCollapse] = useState(true);
const [title, setTitle] = useState("Expand All");
const [icon, setIcon] = useState("fa fa-chevron-right");
const collapseAll = () => {
setCollapse(!collapse);
setIcon(state => {
return state === "fa fa-chevron-right"
? "fa fa-chevron-down"
: "fa fa-chevron-right";
});
setTitle(state => {
return state === "Expand All" ? "Collapse All" : "Expand All";
});
};
return (
<div className="App container my-2">
{/* Expand/Collapse All */}
<button
type="button"
className="btn-warning mt-4 mb-3 float-left"
onClick={collapseAll}
>
<i className={icon} /> {title}
</button>
<CollapsiblePanel title="Title 1" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 2" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 3" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 4" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 5" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
</div>
);
}
Now: Before clicking the Expand/Collapse All button, If any of the collapsible containers (in index.js) is clicked and then on clicking the Expand/Collapse button not all the containers are expanding.
The opened is closing and vice versa.
Expected:
Though the container is opened/closed explicitly. On clicking the Expand/Collapse I would like to expand/collapse all. Thanks in advance.
I would like to Expand/Collapse all using a single button click.
Created a new ponent CollapsiblePanel using reactstrap and using the created ponent in the container(index.js).
Now I can able to expand/collapse all the containers on clicking the button.
https://codesandbox.io/s/fervent-banzai-s9pst
CollapsiblePanel.js
import React, { useState, useEffect } from "react";
import { Collapse } from "reactstrap";
function CollapsiblePanel({ children, ...props }) {
const { title, collapse } = props;
const [isCollapse, setIsCollapse] = useState(collapse);
const [icon, setIcon] = useState("fa fa-chevron-down");
const toggle = () => {
setIsCollapse(!isCollapse);
setIcon(state => {
return state === "fa fa-chevron-down"
? "fa fa-chevron-right"
: "fa fa-chevron-down";
});
};
useEffect(() => {
toggle();
}, [collapse]);
return (
<div className="coll-panel">
<button
type="button"
className="coll-panel-btn btn-primary btn-block text-left"
onClick={() => toggle()}
>
<i className={icon} /> {title}
</button>
<Collapse className="border text-left p-2" isOpen={isCollapse}>
{children}
</Collapse>
</div>
);
}
CollapsiblePanel.defaultProps = {
children: "Add node as a child",
title: "Collapsible Panel",
collapse: true
};
export default CollapsiblePanel;
index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import CollapsiblePanel from "./ponent/CollapsiblePanel";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";
function App() {
const text =
"Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
const [collapse, setCollapse] = useState(true);
const [title, setTitle] = useState("Expand All");
const [icon, setIcon] = useState("fa fa-chevron-right");
const collapseAll = () => {
setCollapse(!collapse);
setIcon(state => {
return state === "fa fa-chevron-right"
? "fa fa-chevron-down"
: "fa fa-chevron-right";
});
setTitle(state => {
return state === "Expand All" ? "Collapse All" : "Expand All";
});
};
return (
<div className="App container my-2">
{/* Expand/Collapse All */}
<button
type="button"
className="btn-warning mt-4 mb-3 float-left"
onClick={collapseAll}
>
<i className={icon} /> {title}
</button>
<CollapsiblePanel title="Title 1" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 2" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 3" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 4" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
<CollapsiblePanel title="Title 5" collapse={collapse}>
<span>{text}</span>
</CollapsiblePanel>
</div>
);
}
Now: Before clicking the Expand/Collapse All button, If any of the collapsible containers (in index.js) is clicked and then on clicking the Expand/Collapse button not all the containers are expanding.
The opened is closing and vice versa.
Expected:
Though the container is opened/closed explicitly. On clicking the Expand/Collapse I would like to expand/collapse all. Thanks in advance.
Share Improve this question asked Nov 9, 2019 at 6:36 kabeer rifayekabeer rifaye 4172 gold badges8 silver badges18 bronze badges1 Answer
Reset to default 3In the collapsible panel you are toggling the previous state. Instead you have to explicitly set expand/collapse state..
const animate = collapse => {
setIsCollapse(collapse);
setIcon(state => {
return state === "fa fa-chevron-down"
? "fa fa-chevron-right"
: "fa fa-chevron-down";
});
};
useEffect(() => {
animate(!collapse);
}, [collapse]);
Try the below sandbox.
https://codesandbox.io/s/festive-moore-cbqsn