[jquery] Twitter Bootstrap hide css class and jQuery

I'm using the hide css class to hide a button on page load.

The problem is that when i try to show the button i've previuosly hidden with jQuery the button is smaller.

(the same thing doesn't happen when i use jQuery to hide and then show the button)

Thanks for helping.

Edit: hide class is just this:

.hide {
    display: none;
}

My button:

<a class="btn hide" id="buttonEditComment" href="javascript:void()"><i class="icon-comment"></i> Edit comment</a>

Javascript i use to show the button:

$("#buttonEditComment").toggle();

This question is related to jquery twitter-bootstrap

The answer is


As dfsq said i just had to use removeClass("hide") instead of toggle()


If an element has bootstrap's "hide" class and you want to display it with some sliding effect such as .slideDown(), you can cheat bootstrap like:

$('#hiddenElement').hide().removeClass('hide').slideDown('fast')

I agree with dfsq if all you want to do is show the button. If you want to switch between hiding and showing the button however, it is easier to use:

$("#buttonEditComment").toggleClass("hide");

This is what I do for those situations:

I don't start the html element with class 'hide', but I put style="display: none".

This is because bootstrap jquery modifies the style attribute and not the classes to hide/unhide.

Example:

<button type="button" id="btn_cancel" class="btn default" style="display: none">Cancel</button>

or

<button type="button" id="btn_cancel" class="btn default display-hide">Cancel</button>

Later on, you can run all the following that will work:

$('#btn_cancel').toggle() // toggle between hide/unhide
$('#btn_cancel').hide()
$('#btn_cancel').show()

You can also uso the class of Twitter Bootstrap 'display-hide', which also works with the jQuery IU .toggle() method.