CODEWITHSUNDEEP
javascriptjquerycss
Katarina
Katarina

Reputation: 55

Can I make a DIV and its contents visible and invisible with jQuery?

I have DIVs on my form. I would like to use javascript to make these visible or invisible depending on some operation. Currently I am doing this:

$('#token2').html("<div style='padding: 2px 4px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border: 1px solid Red;'><span style='color: Red; '>Incorrect</span></div>");

and setting the contents of the DIV each time. Is there a way I can set this in CSS and just change a visible property instead?

Upvotes: 0

Views: 4377

Answers (3)

Matt Ball
Matt Ball

Reputation: 359966

How about .hide() and .show()?

Not directly related to your question, but since you mentioned CSS, I'd really recommend just defining the styles outside of the HTML ...embedded in the JS... something like this:

#token2 > div {
    padding: 2px 4px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid red;
}

#token2 > span {
    color: red;
}

which simplifies the JavaScript down to

$('#token2').html('<div><span>Incorrect</span></div>');

although the .html() part is really irrelevant anyway, with the previously mentioned jQuery methods.

Upvotes: 0

Gajendra Bang
Gajendra Bang

Reputation: 3583

use this

.hidden {display:none}

<span id="incorrect-answer"  class="hidden">Incorrect</span>

and then use jQuery .addClass and .removeClass to make it visible/invisible

e.g.

$("#incorrect-answer").addClass("hidden")
$("#incorrect-answer").removeClass("hidden")

Upvotes: 0

Jason Goemaat
Jason Goemaat

Reputation: 29234

$(#token2).toggle() will toggle the visibility, show() and hide() do the specific operations. Give it the style "display: hidden" to start it off invisible.

Upvotes: 2

Related Questions