CODEWITHSUNDEEP
reactjstypescriptreact-hooksantd
yldm
yldm

Reputation: 164

Ant design Collapse - expand / collapse all button

How can I have a button triggering an ant.design Collapse component to expand all its tabs, or collapse all of them? I tried changing defaultActiveKey but I get the impression that this can only be changed when the page is rendered? If not, could someone provide a short snippet of a button collapsing multiple panels? The number of panels I have is set.

Upvotes: 1

Views: 4241

Answers (1)

Giorgi Moniava
Giorgi Moniava

Reputation: 28684

You should use component in controlled mode, that is you should supply value of panels which are open. For that you should use activeKey prop. Here is example:

let App = () => {
  let [openPanels, setOpenPanels] = React.useState([]);
  return (
    <Collapse activeKey={openPanels} onChange={setOpenPanels}>
      <Panel header="This is panel header 1" key="1">
        <p>test1</p>
      </Panel>
      <Panel header="This is panel header 2" key="2">
        <p>test2</p>
      </Panel>
      <Panel header="This is panel header 3" key="3">
        <p>test3</p>
      </Panel>
    </Collapse>
  );
};

Now you can easily add a button and on click set setOpenPanels([]) to collapse all of them.

Upvotes: 1

Related Questions