Как заставить мой аккордеон в стиле сетки работать как один выпадающий список?

Question

Итак, у меня есть веб-сайт, на котором я показываю 6 фотографий, каждая из которых находится в сетке, и каждая из них представляет собой кнопку аккордеона.Я бы хотел, чтобы они показывали разную информацию, но с одним аккордеонным телом.

Вот пример того, что я имею в виду

Вот что я уже сделал

Я знаю, что проблема заключается в каждому кнопки аккордеона есть свое собственное тело, и поэтому он остается в своем собственном аккордеоне.Я просто не уверен, как это изменить.

Я пытался переместить Аккордеон. Свернуть из основного корпуса, так что, возможно, это будет его собственный, но это только заставило аккордеон перестать работать, что имеет смысл.

Я также пытался перемещать свою карту, и это тоже не слишком много.

  render() {
    return (
      <div className='news'>
        <div className='news_info'>
          <Accordion defaultActiveKey='0'>
            <Card>
              <Card.Header>
                <p>Albums</p>
                <Accordion.Toggle as={Button} variant='link' eventKey='0'>
                  +
                </Accordion.Toggle>
              </Card.Header>
              <Accordion.Collapse eventKey='0'>
                <Card.Body>
                  <div class='items'>
                    {this.state.discography.map((disco, index) => {
                      return (
                        <div>
                          <Accordion key={index}>
                            <Card>
                              <div class='item' key={index}>
                                <div class='item-image'>
                                  <img src={disco.image} alt='' />
                                </div>

                                <div class='item-text'>
                                  <div class='item-text-wrap'>
                                    <Accordion.Toggle eventKey='1'>
                                      <h2 class='item-text-title'>
                                        {disco.title}
                                      </h2>
                                    </Accordion.Toggle>
                                  </div>
                                </div>
                              </div>
                            </Card>
                            <Accordion.Collapse eventKey='1'>
                              <Container>
                                <div className='information'>
                                  <p>{disco.title}</p>
                                  <p>{disco.details}</p>
                                  <img src={disco.image} />
                                </div>
                              </Container>
                            </Accordion.Collapse>
                          </Accordion>
                        </div>
                      );
                    })}
                  </div>
                </Card.Body>
              </Accordion.Collapse>
            </Card>
          </Accordion>
        </div>
      </div>
    );
  }

CSS

.items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
}

.item {
  position: relative;
  overflow: hidden;

  &:after {
    content: "";
    position: absolute;
    display: block;
    background-color: black;
    opacity: 0.9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scale(2) translateX(-75%) translateY(-75%) rotate(-28deg);
    transition: transform 3s cubic-bezier(0.2, 1, 0.3, 1);
  }

  //Bring in main color overlay

  &:hover:after {
    transform: scale(2) translateX(0) translateY(0) rotate(-28deg);
  }

  //Scale image on hover

  // &:hover &-image {
  //   transform: scale(1.2);
  //}

  //Bring in text on hover

  &:hover &-text {
    opacity: 1;
    transform: translateY(0);
  }

  &-image {
    height: auto;
    transform: translateZ(0);
    display: block;
    transition: transform 750ms cubic-bezier(0.2, 1, 0.3, 1);
  }

  &-image:before {
    content: "";
    display: block;
    padding-top: 66%;
    overflow: hidden;
  }

  &-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    line-height: 0;
  }

  &-text {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
    color: #fff;
    transform: translateY(-20%);
    transition: opacity 500ms cubic-bezier(0.2, 1, 0.3, 1),
      transform 500ms cubic-bezier(0.2, 1, 0.3, 1);
    transition-delay: 300ms;
  }

  &-text-wrap {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);

    & button {
      background-color: transparent;
      color: #fff;
      border: none;
    }
  }

  &-text-title {
    font-size: 2rem;
    padding: 0 1rem;
    margin: 5px 0 0 0;
  }

  &-text-category {
    text-transform: uppercase;
    font-size: 1.2rem;
    opacity: 0.7;
    margin: 0;
  }
}