I am working on an HTML code that displays different types of messages when a Sign up DIV is clicked. The error message shows up when the Sign Up error is clicked, and the success message appears when Sign Up success is clicked. By default, these messages are set to display:none.
My goal is to create a specific jQuery function called "detectDisplay()" that will only execute when the success message is visible with a CSS code of display:block.
Here is the current code I have. Any assistance or guidance would be greatly appreciated. Thank you.
CSS:
.cs_error { display: none; }
.cs_success { display: none; }
HTML:
<div class="cs_signUp" onclick="showError(); detectDisplay();">Sign up » error </div>
<div class="cs_signUp" onclick="showThanks(); detectDisplay();">Sign up » success </div>
<br/>
<div class="cs_success">
<div>Thank you for signing up!</div>
</div>
<div class="cs_error">
<div>Invalid input! Please try again!</div>
</div>
SCRIPT:
function showError() {
$(".cs_success").css("display","none");
$(".cs_error").css("display","block");
}
function showThanks() {
$(".cs_error").css("display","none");
$(".cs_success").css("display","block");
}
function detectDisplay() {
}