I have this accordion menu in React, i didn't write this myself but i am trying to understand why every time an element is expanded it scrolls the page to the top and what i can do to prevent that.
I want to page to stay where it is when an element is expanded, right now it jumps right to the top if i am scrolled down the moment i click to expand.
state = {
isBasic: false,
isMultiTarget: [],
accordionKey: 1
};
render() {
const { accordionKey } = this.state;
return (
<Aux>
<Row>
<Col sm={12} className="accordion">
<h5>Accordion Example</h5>
<hr/>
<Card className="mt-2">
<Card.Header>
<Card.Title as="h5">
<a href={DEMO.BLANK_LINK}
onClick={() => this.setState({ accordionKey:
(accordionKey !== 1) ? 1 : 0 })}
aria-controls="accordion1"
aria-expanded={accordionKey=== 1}>
Collapsible Group Item #1
</a>
</Card.Title>
</Card.Header>
<Collapse in={this.state.accordionKey === 1}>
<div id="accordion1">
<Card.Body>
<Card.Text>
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.
</Card.Text>
</Card.Body>
</div>
</Collapse>
</Card>
<Card className="mt-2">
<Card.Header>
<Card.Title as="h5">
<a href={DEMO.BLANK_LINK}
onClick={() => this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 })}
aria-controls="accordion2"
aria-expanded={accordionKey === 2}>
Collapsible Group Item #2
</a>
</Card.Title>
</Card.Header>
<Collapse in={this.state.accordionKey === 2}>
<div id="accordion2">
<Card.Body>
<Card.Text>
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.
</Card.Text>
</Card.Body>
</div>
</Collapse>
</Card>
<Card className="mt-2">
<Card.Header>
<Card.Title as="h5">
<a href={DEMO.BLANK_LINK}
onClick={() => this.setState({ accordionKey: (accordionKey !== 3) ? 3 : 0 })}
aria-controls="accordion3"
aria-expanded={accordionKey === 3}>
Collapsible Group Item #3
</a>
</Card.Title>
</Card.Header>
<Collapse in={this.state.accordionKey === 3}>
<div id="accordion3">
<Card.Body>
<Card.Text>
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.
</Card.Text>
</Card.Body>
</div>
</Collapse>
</Card>
</Col>
</Row>
</Aux>
Usually this means you're following a link with href="#" in it, which tells the browser to scroll to the top of the page.
In your card titles, I see:
<a href={DEMO.BLANK_LINK}
onClick={() => this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 })}
aria-controls="accordion2"
aria-expanded={accordionKey === 2}>
Collapsible Group Item #2
</a>
If DEMO.BLANK_LINK is "#", that would explain it. You need to cancel the default action of that link when clicking it; see changes to onClick:
<a href={DEMO.BLANK_LINK}
onClick={(e) => { e.preventDefault(); this.setState({ accordionKey: (accordionKey !== 2) ? 2 : 0 }); }}
aria-controls="accordion2"
aria-expanded={accordionKey === 2}>
Collapsible Group Item #2
</a>