CSS Accordion Not Auto-Expanding on Desktop Site

Steve_Lella
Level 2

CSS Accordion Not Auto-Expanding on Desktop Site

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