MDBCollapse to close only when user click on another row

Can you please let me know if this scenario is possible :

Having two buttons each having its own collapsable area and pressing button1 shows collapsable area1 but re-pressing button1 does not close collapsable area1 unless user clicks on button2 which closes collapse area1 and opens collapse area2.

Can you provide a sample source code for that.

Thanks in advance.

Hi @afshinshahpari@gmail.com,

This code is good for you?

import React, { Component } from 'react';
import { MDBBtn, MDBCollapse } from 'mdbreact';

class CollapsePage extends Component {
  state = {
    collapseID: ''
  };

  toggleCollapse = collapseID => () => {
    if (collapseID !== this.state.collapseID) {
      this.setState(prevState => ({
        collapseID: prevState.collapseID !== collapseID ? collapseID : ''
      }));
    }
  };

  render() {
    return (
      <>
        <MDBBtn
          color='primary'
          href='!#'
          onClick={this.toggleCollapse('collapse1')}
          style={{ marginBottom: '1rem' }}
        >
          COLLAPSE LINK
        </MDBBtn>
        <MDBBtn
          color='primary'
          onClick={this.toggleCollapse('collapse2')}
          style={{ marginBottom: '1rem' }}
        >
          COLLAPSE BUTTON
        </MDBBtn>
        <MDBBtn
          color='primary'
          onClick={this.toggleCollapse('collapse3')}
          style={{ marginBottom: '1rem' }}
        >
          COLLAPSE BUTTON
        </MDBBtn>
        <MDBBtn
          color='primary'
          onClick={this.toggleCollapse('')}
          style={{ marginBottom: '1rem' }}
        >
          Hide Collapse
        </MDBBtn>
        <MDBCollapse id='collapse1' isOpen={this.state.collapseID}>
          Pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
          richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
          Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
          single-origin coffee nulla assumenda shoreditch et. Nihil anim
          keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
          sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
          you probably haven&apos;t heard of them accusamus labore sustainable
          VHS.
        </MDBCollapse>
        <MDBCollapse id='collapse2' isOpen={this.state.collapseID}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
          Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid
          single-origin coffee nulla assumenda shoreditch et. Nihil anim
          keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
          sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
          occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
          you probably haven&apos;t heard of them accusamus labore sustainable
          VHS.
        </MDBCollapse>
        <MDBCollapse id='collapse3' isOpen={this.state.collapseID}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
          pulvinar, orci ultricies dignissim luctus, mi ligula euismod risus, at
          feugiat erat turpis a dui. Sed ultricies dui nec quam lacinia, vel
          feugiat tellus vulputate. Aenean ullamcorper, urna eget rhoncus
          vestibulum, nunc sapien volutpat lorem, id congue orci ligula at
          neque. Mauris nisi sapien, accumsan eu feugiat at, bibendum sed
          turpis. Sed diam arcu, vehicula sed ultricies ac, sollicitudin in
          neque. Donec placerat nisi eu feugiat malesuada. Integer ac euismod
          diam, sed rutrum lectus. Cras ultrices, nisl hendrerit auctor dictum,
          ligula sem hendrerit sapien, lobortis aliquam dolor lectus nec lorem.
          Nulla suscipit pharetra sem, mattis rhoncus elit dapibus et. Nulla
          lectus ante, interdum et suscipit a, tempus convallis arcu.
          Pellentesque tempus viverra odio at mollis. Sed egestas in ipsum vel
          accumsan. Sed iaculis, mauris vitae malesuada feugiat, turpis justo
          placerat diam, eget tempus leo arcu at nibh. Nulla hendrerit cursus
          tortor, eu auctor tortor viverra quis. Duis efficitur tincidunt enim,
          et consectetur dui pretium ac. Aliquam maximus quam turpis, eu
          sagittis eros egestas nec. Duis mollis id felis eu auctor. Donec
          porttitor leo urna. Integer pellentesque, elit at dapibus faucibus,
          elit tellus blandit nibh, vel rhoncus velit erat vitae lectus. Sed
          vulputate nisi a augue vestibulum bibendum. Morbi lobortis quis orci
          sit amet vestibulum. Nam urna nibh, volutpat vel ultricies vitae,
          dapibus sit amet neque. Suspendisse tempor elit lectus, a sollicitudin
          enim ornare sit amet. Donec aliquet mollis euismod. Nam dictum eros
          lacus, cursus congue mauris varius ac. Nunc tincidunt nulla sed ante
          dictum blandit. Integer dolor elit, finibus id pretium at, molestie
          non enim. Curabitur nec ante sed nisl elementum ultrices.
        </MDBCollapse>
      </>
    );
  }
}

export default CollapsePage;

Probably what you are interested in is used in the function toggleCollapse, namely that

if (collapseID !== this.state.collapseID)

Please test my code and tell me if the problem still exists.

Best regards, Konrad.