Nrthugu

Expected Behavior: When page loads, initial tab is open in the accordion. The other accordion tabs are positioned on the bottom of the screen and slide up when section closes.

If accordion section is longer then screen, the area is scrollable but tabs remained positioned on bottom of screen.

Issue: Currently, my accordion pushes all elements down the page. I believe this issue is caused because i can't get the position + overflow right. Any help would be appreciated.

Accordion CSS:

.accordion {

  align-items: flex-start;

  align-content: flex-start;

  border-left: 1px solid black;

  border-bottom: 1px solid black;

  box-sizing: border-box;

  display: flex;

  flex-flow: row wrap;

  height: calc(100vh - 68px);

  position: relative;

  right: 0;

  top: 0;



  &__panel {

    border-bottom: 1px solid black;

    flex: 1 100%;

    flex-direction: column;

    position: relative;

    overflow: hidden;



    &__header {

      font-size: 1.25em;

      line-height: 2em;

      padding: 5px;

      text-align: left;



      span {

        float: right;

        padding: 0 1em 0 0;



        img {

          width: 17px;

        }

      }

    }



    &__body {

    }

  }



  .active {

    background: black;

    color: lightgray;

  }



  .hide {

    display: none;

  }

}

HTML Layout:

<div class="accordion">

  <div class="accordion__panel">

    <div class="accordion__panel__header">SOME HEADER<span><img src="static/svg/caret.svg"></span></div>

    <div class="accordion__panel__body hide">

      SOME CONTENT GOES HERE.

    </div>

  </div>

</div>

I don't believe my JS is relevant in this case, but can post that too, if necessary.

The JS removes the class hide from the body. This is temp till animation is implemented.