CODEWITHSUNDEEP
jquerytwitter-bootstrap
siannone
siannone

Reputation: 6763

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();

Upvotes: 37

Views: 107287

Answers (4)

Nicolas Martinez
Nicolas Martinez

Reputation: 63

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.

Upvotes: 4

KiwiPiet
KiwiPiet

Reputation: 1324

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");

Upvotes: 8

kirpit
kirpit

Reputation: 4757

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')

Upvotes: 18

siannone
siannone

Reputation: 6763

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

Upvotes: 42

Related Questions