CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Corey Schnedl
Corey Schnedl

Reputation: 175

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

Upvotes: 0

Views: 87

Answers (2)

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

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

Upvotes: 1

Jake Tigchelaar
Jake Tigchelaar

Reputation: 1

$('div.errorSummaryDiv').show() should remove display:none

Upvotes: 0

Related Questions