How to execute JQuery function when CSS display block is detected
<p>I have an HTML code with 2 types of messages when a Sign up DIV is clicked. When Sign Up error is clicked, the error message is displayed.  When sign Up success is clicked, the success message is displayed. By default these messages are set to display:none. </p>

<p>My target output is to create a separate jQuery function "detectDisplay()" that executes "ONLY when success message has a CSS code display:block".</p>

<p>Below is my code. Any help is appreciated.  Thanks. </p>

<p>CSS:</p>

<pre><code>.cs_error { display: none; }
.cs_success { display: none; }
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div class="cs_signUp" onclick="showError(); detectDisplay();"&gt;Sign up &amp;raquo; error &lt;/div&gt;
&lt;div class="cs_signUp" onclick="showThanks(); detectDisplay();"&gt;Sign up &amp;raquo; success &lt;/div&gt;
&lt;br/&gt;
&lt;div class="cs_success"&gt;
    &lt;div&gt;Thank you for signing up!&lt;/div&gt;
&lt;/div&gt;
&lt;div class="cs_error"&gt;
    &lt;div&gt;Invalid input! Please try again!&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>SCRIPT:</p>

<pre><code>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() {

}
</code></pre>