36

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();
8
  • 1
    Take firebug and find out what class or property caused that
    – zerkms
    Apr 27, 2012 at 10:52
  • There's not really much help anyone can offer without seeing your code. Try setting up a jsfiddle.net Apr 27, 2012 at 10:54
  • 7
    How do you show your button? Try doing .removeClass('hide') instead of .toggle().
    – dfsq
    Apr 27, 2012 at 10:57
  • 1
    removeClass works here jsfiddle.net/YGP2v.
    – dfsq
    Apr 27, 2012 at 11:02
  • 1
    Bootstrap class .hide has !important attached to it, so using toggle won't work, as the "display:none" of class "hide" is still there and will take precedence due to the !important... That's why removeClass works, the element goes back to its default "display" status because the class "hide" has been removed. Or as mentioned below, toggleClass('hide') will also work well. Jan 25, 2017 at 12:16

4 Answers 4

41

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

17

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.