Topic: MDBCollapse to close only when user click on another row
afshinshahpari@gmail.com free asked 5 years ago
I have few rows that each of them has MDBCollapse inside that and whenever user click on that row, it opens a new collapsable are under the row to show few button.
It works fine but I need that collapsable buttons to hide only when user click on another row not when user clicks on this row again too.
The reason that I need this is that I have a text box inside and few buttons on each row that each time that user clicks on each button on the main row, it causes the collapsable area to show and hide.
I would appreciate to have your advice and a sample source code that this feature works.
Konrad Stępień staff answered 5 years ago
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'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'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.
afshinshahpari@gmail.com free answered 5 years ago
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.18.1
- Device: mac
- Browser: chrome
- OS: macos
- Provided sample code: No
- Provided link: No
Christian Aichner pro commented 5 years ago
Hi!
I would require some more details and perhaps sketches on what you want exactly. Currently this is too little information for me to help you in any meaningful way.
Best regards, Chris