I am trying to change the direction of the way the accordion element in react-bootstrap moves. Currently it moves down. Is there a simple way to make it open in the up direction?

Below is an example of one of my ponents. I want to be able to open it in the upwards direction as opposed to downward, the reason being that I have placed it on the bottom of the screen and so when I open it in default settings it goes down as opposed to up:

import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const InfoBox = ( props ) => {

    const Styles = {
        width: "100%",
        marginTop: "147%"
    }

    return (
        <div style={Styles}>
        <Accordion>
            <Card>
            <Card.Header>
                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                    Link Info
                </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                <div>{`Link Address: ${props.sa}`}</div>
                <div>{`munity board: ${props.cb}`}</div>
                <div>{`lat: ${props.lat}`}</div>
                <div>{`lon: ${props.lon}`}</div>
                </Card.Body>
            </Accordion.Collapse>
            </Card>    
        </Accordion>
        </div>
    )
};

export default InfoBox;

I am trying to change the direction of the way the accordion element in react-bootstrap moves. Currently it moves down. Is there a simple way to make it open in the up direction?

Below is an example of one of my ponents. I want to be able to open it in the upwards direction as opposed to downward, the reason being that I have placed it on the bottom of the screen and so when I open it in default settings it goes down as opposed to up:

import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const InfoBox = ( props ) => {

    const Styles = {
        width: "100%",
        marginTop: "147%"
    }

    return (
        <div style={Styles}>
        <Accordion>
            <Card>
            <Card.Header>
                <Accordion.Toggle as={Button} variant="link" eventKey="0">
                    Link Info
                </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
                <Card.Body>
                <div>{`Link Address: ${props.sa}`}</div>
                <div>{`munity board: ${props.cb}`}</div>
                <div>{`lat: ${props.lat}`}</div>
                <div>{`lon: ${props.lon}`}</div>
                </Card.Body>
            </Accordion.Collapse>
            </Card>    
        </Accordion>
        </div>
    )
};

export default InfoBox;

• javascript
• reactjs
• react-bootstrap

• 1 Would putting the Accordion.Collapse ponent above the Card.Header ponent suffice? – Nick Commented Oct 20, 2019 at 21:27

3 Answers 3

Moving the accordion upward can be achieved by simple CSS changes.

We can reverse the flex-direction of the div with classname .card. By default the flex-direction is column. We can override it and make it column-reverse.

.card default styling provided by bootstrap

.card { 
    display: flex;
    flex-direction: column;
}

Change the flex direction by adding css styling in your projects with a higher precedence. Like this -

.my-footer .card {
    flex-direction: column-reverse;
}

Here is the codesandbox solution for the same - https://codesandbox.io/s/distracted-fog-nxb6n?file=/src/styles.css

More explanation - When react-bootstrap renders the accordion, it adds this DOM structure -

<div class="accordion">
  <div class="card">
    <div class="card-header">
      ...
    </div>
    <div class="collapse" style="">
      <div class="card-body">
        ...
      </div>
    </div>
  </div>
</div>

By giving flex-direction as column-reverse we are interchanging the flow of .card-header and .collapse elements.

Let me know if this helps.

I didn't need any CSS changes or anything. What I did was simply moving the <Accordion.Collapse> above the <Accordion.Toggle> like so;

    <Accordion>
      <Card>
        <Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
             <div>{`Link Address: ${props.sa}`}</div>
             <div>{`munity board: ${props.cb}`}</div>
             <div>{`lat: ${props.lat}`}</div>
             <div>{`lon: ${props.lon}`}</div>
            </Card.Body>
          </Accordion.Collapse>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Link Info
            </Accordion.Toggle>
        </Card.Header>
      </Card>    
    </Accordion>

Let me know if it worked for you.

I think it is not possible: a Collapse doesn't move, a Collapse just expands or (indeed) collapses.

The perceived effect when a Collapse expands is that what is beyond the Collapse itself moves down, but actually the page enlarges and keeps the vertical scroll at same position.

Since your Collapse is at the bottom of the page, a possible solution is to also scroll down the page simultaneously to the expansion of the Collapse.

You should achieve it quite easily playing with window.scrollY and window.scrollTo().

Hope this helps.