Аккордеон HTML / CSS не расширяется автоматически на настольной версии целевой страницы Marketo - PullRequest
Новая
       13

Аккордеон HTML / CSS не расширяется автоматически на настольной версии целевой страницы Marketo

0 голосов
/ 30 августа 2018

Название говорит само за себя. Я пытаюсь добавить аккордеон к целевой странице с помощью CSS. Я настроил все, кроме одной вещи: настольная версия LP автоматически не изменяет размеры с аккордеонами. Есть идеи, почему открытый аккордеон оказывается поверх других элементов сайта?

Целевая страница : http://pages.na.industrial.panasonic.com/Subscribe_Landing-Page-Subscribe-Thank-You---Erics-Optimizations.html

Вот стили, которые я использовал для CSS: 

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