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
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.
Source: Stackoverflow.com