CSS Accordion Not Auto-Expanding on Desktop Site

Steve_Lella · ‎08-28-2018

Hey Everyone,

I'm trying to add an accordion to a thank you Landing Page using CSS. I got everything set up except one thing: the desktop version of the LP doesn't automatically resize with the accordions. Any ideas why the opened accordion winds up on top of the other website elements?

Landing Page: http://pages.na.industrial.panasonic.com/Subscribe_Landing-Page-Subscribe-Thank-You---Erics-Optimiza...

Accordion CSS & HTML

<style>
.accordion {
background-color: #edefef;
    color: #464646;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5em;
font-weight: 500;
    transition: 0.4s; 
}
.active, .accordion:hover {
background-color: #d7d9d9;
}
.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

<button class="accordion">2016</button>
<div class="panel">
<div class="archiveContainer"  style="padding-top: 0px; ">
<h2 class="archeader">DECEMBER 2016</h2>
<a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161214.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b> X-GaNTM Power Transistors&#9658;</b></a>
</div>           
<div class="archiveContainer"  style="padding-top: 0px; ">
<h2 class="archeader">NOVEMBER 2016</h2>
<a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161115.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b> Rechargeable Pin Type Lithium Ion Battery & “Saturn Lens” PIR Motion Sensor &#9658;</b></a>
</div>
<div class="archiveContainer"  style="padding-top: 0px; ">
<h2 class="archeader">OCTOBER 2016</h2>
<a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20161018.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>NASBIS Insulating Sheets &#9658;</b></a>
</div>
<div class="archiveContainer" style="padding-top: 0px; ">
<h2 class="archeader">SEPTEMBER 2016</h2>
<a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20160914.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>Bluetooth Low Energy & NFC Combination RF Module &#9658;</b></a>
</div>
<div class="archiveContainer"  style="padding-top: 0px; " >
<h2 class="archeader">AUGUST 2016</h2>
<a href="http://pages.na.industrial.panasonic.com/rs/173-ONW-167/images/online-whats-next-20160816.html" target="_blank" style="text-decoration: none; color: #3080bf; " target="_blank"><b>Bluetooth Low Energy Beacon &#9658;</b></a>
</div>
</div>

Any and all help would be greatly appreciated!

Steve