Corey Schnedl Corey Schnedl -4 years ago 55
CSS Question

Trying to change a jquery element from display: hidden to display: block

I'm new to using Jquery. Currently, the errorSummaryDiv element is not displaying. I am trying to write the code to change the element from display: none to display: block or just get rid of the display:none attribute altogether. For some reason I can't get my css to change from hidden to block with the below code. What am I doing incorrectly? I know the if statement is evaluating to true, because 'hi' is being logged in the console. Do you have to do something special that I am missing? Thank you in advance.

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;
}

Answer Source

Use hide / show method of jquery like:

$('.errorSummaryDiv').hide();  // To hide

$('.errorSummaryDiv').show();  // To show

Explanation: hide() will put display:none css on the element on which it is called and vice versa

Working Fiddle

Note: Don't forget to include jquery library in your code

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download