Display div 5 seconds after button click - html

Question

I want to show a block 5 seconds after clicking the button. My current code doesn't work. What's the problem?
if ($('#identify').click(function() {
setTimeout(function() {
document.getElementById('block1').classList.remove('hide');
}, 5000);
}));
.hide {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary" style="padding: 10px;">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>

Answer 1

Event handlers in JS don't work as you're expecting; ie. by checking state in if conditions.
Instead you should attach event handler functions to the elements which will run when the specific event occurs. This is how your code should be structured:
jQuery($ => {
$('#identify').on('click', function() {
setTimeout(function() {
$('#block1').removeClass('hide');
}, 5000);
});
});
.hide { display: none; }
#identify { padding: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="submit" id="identify" class="btn btn-primary">Identify</button>
<div class="slideRight expandUp hide" id="block1">Text Appears</div>
Note the inclusion of a document.ready handler in the above code, and also moving the inline CSS in to the stylesheet.

Answer 2

Try this code:
$(document).ready(function(){
$('#identify').click(function() {
setTimeout(function(){
document.getElementById('block1').classList.remove('hide');
}, 5000);
});
});

Answer 3

Below code will show taht div immediate and then it hide the text and then it reappers after 5 sec as in your question.
<script>
$('#identify').click(function() {
$("#block1").removeClass('hide');
setTimeout(function(){
$("#block1").addClass('hide');
}, 1000);
setTimeout(function(){
$("#block1").removeClass('hide');
}, 6000);
});
</script>