Pfthb

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.