Wednesday, 14 August 2013

jQuery remove class that hides content

jQuery remove class that hides content

I have a div that 'overlays' on top of the main container using the
position absolute within a relatively positioned container thing. I'm
trying to get it so that when I click on a button, it appears by removing
the hide class. It seemingly has no effect, even though in the console I
get no errors (and newThread isn't hidden.)
<div id='newThread' class='hide'>
<form>
<textarea></textarea>
</form>
</div>
#container { position: relative; }
#newThread {
position: absolute;
top: 50px;
background-color: rgba(239, 239, 239, 0.9);
left: 50px; width: 600px;
min-height: 480px; border-radius: 5px;
box-shadow: 5px 2px 5px #888;
}
.hide { display: none; }
$('#sidebar').html('<h1>Welcome to the forum!</h1><div
class="container"><button class="btn btn-default"
id="newThreadButton">New Topic</button><br /><button class="btn
btn-default">Log out</button></div>');
$('#sidebar').fadeIn();
$('#newThreadButton').click(function() {
$('#newThread').removeClass('hide');
});
alert($('#newThread').hasClass('hide')); outputs false.

No comments:

Post a Comment