Hiding and show info jquery ajax

Your alertMessage has a class (hideMessage) which keeps it hidden when calling .show() – specifically .show() only changes the style of the element(s), it doesn’t know about your custom class.

Change class="hideMessage" to style='display:none' to have it show with .show()

<div id="alertMessage" style="display:none;"> This is alert message. </div> 

or change your “show” line to

$("#alertMessage").removeClass("hideMessage")

Here are two snippets that demonstrate it working.

setTimeout(() => {
  $("#alertMessage").removeClass("hideMessage");
  $("#Message").hide();
}, 1500);
.hideMessage { display: none; }
#alertMessage { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="alertMessage" class="hideMessage"> This is alert message. </div>
<div id="Message"> default text. </div>

setTimeout(() => {
  $("#alertMessage").show();
  $("#Message").hide();
}, 1500);
.hideMessage { display: none; }
#alertMessage { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="alertMessage" style='display:none;'> This is alert message. </div>
<div id="Message"> default text. </div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top