0 Replies Latest reply on Aug 28, 2018 11:09 AM by Steve Lella

    CSS Accordion Not Auto-Expanding on Desktop Site

    Steve Lella

      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-Optimizations.html

       

      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