I have a form inside the 3rd accordion panel. When the Submit button is clicked, if the verification code entry does not match, the page will reload and display a message saying "Please try again making sure you entered the correct verification code". But when the page reloads all accordion panels are closed & I need the 3rd panel to stay open (or any that are opened) if this happens. Is there javascript that can handle this or would it be better to open a tooltip/popup with the message? If so, where can I find the code for that?
<%@ Language=VBScript%>
<% response.buffer=true%>
<%
Dim strrandom
Randomize
Random_Number_Min = 7825874
Random_Number_Max = 487985487
Random_Number = Int(((Random_Number_Max-Random_Number_Min+1) * Rnd) + Random_Number_Min)
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
.one {
border: 1px solid #f00;
width:100px;
font: italic;
text-decoration: line-through;
color:#4ba698;
font-size:11pt;
}
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;
}
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: 500px;
}
</style>
</head>
<body>
<h2>Animated Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="#" class="close">Close</a></p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="#" class="close">Close</a></p>
</div>
<button class="accordion">Section 3</button>
<div id="foo" class="panel">
<form action="tools_send_mail.asp" method="POST" name="FormName" id="frmSGroups" >
<%Response.write request.querystring("message")%>
<table id="request" width="600" border="0" cellspacing="0" cellpadding="10" style="font-size:9pt">
<tbody>
<tr>
<td width="33%" valign="top">Name<br>
<input type="text" size="20" name="Name" maxlength="30" tabindex="8"></td>
<td colspan="3" valign="top">Email<br>
<input type="text" size="48" name="Email" maxlength="50" tabindex="9"></td>
</tr>
<tr>
<td valign="top">Address<br>
<input type="text" size="20" name="address" maxlength="30" tabindex="4"></td>
<td width="33%" valign="top">City<br>
<input type="text" size="20" name="City" maxlength="20" tabindex="5"></td>
<td width="58" valign="top">State<br>
<input type="text" size="2" name="State" maxlength="2" tabindex="6"></td>
<td width="108" valign="top">Zip<br>
<input type="text" size="9" name="Zip_Code" maxlength="11" tabindex="7"></td>
</tr>
<tr>
<td colspan="2" valign="top">For verification purposes, please enter the numbers you see below:
<div align="right" class="one">
<% Response.Write Random_Number %>
</div></td>
<td colspan="2" valign="top"><input type="text" name="Code" id="Code" size="20" maxlength="9" tabindex="17" required></td>
</tr>
<tr>
<td colspan="4" valign="top" ><input name="random_num" type="hidden" id="random_num" value="<% Response.Write Random_Number %>">
<%Response.write request.querystring("message")%></td>
</tr>
<tr>
<td colspan="4"><input name="submit" type="submit" class="btn btnGold" value="SUBMIT >>" border="0" tabindex="18"></td>
</tr>
</tbody>
</table>
</form>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</body>
</html>
