Just starting out with Jquery and running into an issue. The errorSummaryDiv element on my webpage is not showing up as intended. I've been trying to write the code that will change the display attribute from 'none' to 'block', or even just remove the display:none altogether. Despite my best efforts, the CSS isn't updating when using the code below. What could I be doing wrong? The if statement seems to be working correctly, as 'hi' is being logged in the console. Is there a specific step I'm missing? Thank you for any help you can provide.
HTML:
<div class = "errorSummaryDiv">
<h3>You have the following errors: </h3>
<ul id="errors"></ul>
</div>
Jquery/Js:
if($('#errors').children().length === 0) {
console.log('hi');
$('div.errorSummaryDiv').css('display', 'block');
}
css:
.errorSummaryDiv {
display: none;
width: 55%;
background-color: #FFF69E;
border-radius: 4px;
color: #555;
margin: 0 auto;
}
div {
display: block;
}