Javascript Accordion не продолжает расширяться

Question

На одной из моих страниц для сайта ASP.NET/C# я использую аккордеон Javascript, чтобы содержать элементы управления GridView, отображающие информацию из базы данных. Когда я создаю страницу и тестирую ее локально, мне нужно дважды щелкнуть аккордеон, чтобы она ничего не делала, и она действительно отрывочна и обычно вообще не открывается. Когда я публикую веб-сайт и перехожу в свой домен в IE или Chrome, он либо вообще не открывается, либо откроется на несколько секунд и рухнет. У кого-нибудь есть представление, почему это может произойти? Это код:

HTML:

<button class="accordion">Cases</button> 
<div class="panel"> 
<p> 
    <asp:GridView ID="gvCases" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="CaseID" DataSourceID="sdsCases" ForeColor="#333333" GridLines="None" AllowSorting="True"> 
     <AlternatingRowStyle BackColor="White" /> 
     <Columns> 
      <asp:BoundField DataField="CaseID" HeaderText="CaseID" ReadOnly="True" SortExpression="CaseID" /> 
      <asp:BoundField DataField="Brand" HeaderText="Brand" SortExpression="Brand" /> 
     </Columns> 

    </asp:GridView> 
    <asp:SqlDataSource ID="sdsCases" runat="server" ConnectionString="<%$ ConnectionStrings:HardwareConnectionString %>" SelectCommand="SELECT * FROM [Computer_Cases]"></asp:SqlDataSource> 
</p> 
</div> 

CSS:

button.accordion { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
background-color: #ddd; 
} 

button.accordion:after { 
content: '\02795'; 
font-size: 13px; 
color: #777; 
float: right; 
margin-left: 5px; 
} 

button.accordion.active:after { 
content: "\2796"; 
} 

div.panel { 
padding: 0 18px; 
background-color: white; 
max-height: 0; 
overflow: hidden; 
transition: 0.6s ease-in-out; 
opacity: 0; 
} 

div.panel.show { 
opacity: 1; 
max-height: 3000px; 
} 

Answer 1

Посмотрите ниже скрипку.

https://jsfiddle.net/varit05/4pxkfef5/

Ваш код работает отлично.

Похоже, что есть некоторые проблемы с изображением внутри аккордеона.

CSS:

#mainsection { 
    width:1200px; 
    margin:0 auto; 
    text-align: center; 
} 

#descriptionSection{ 
    font-size: 22px; 
} 

#leftSide{ 
    float: left; 
    width: 230px; 
    background-color: white; 
    text-align: left; 
} 

#rightSide{ 
    float: right; 
    width: 970px; 
    background-color: white; 
} 

button.accordion { 
background-color: #eee; 
color: #444; 
cursor: pointer; 
padding: 18px; 
width: 100%; 
border: none; 
text-align: left; 
outline: none; 
font-size: 15px; 
transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 

button.accordion:after { 
    content: '\02795'; 
    font-size: 13px; 
    color: #777; 
    float: right; 
    margin-left: 5px; 
} 

button.accordion.active:after { 
    content: "\2796"; 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 3000px; 
}