Bootstrap hide is not working with jQuery.show

[phaidon]

We can solve it with that. But it is not a nice solution.

// working with jQuery.show();
$('.hide').hide().removeClass('hide');

The bootstrap ppl know the problem, but are not willing to change the behavior at the moment.
twbs/bootstrap#9237
twbs/bootstrap#9881

[ghost]

Can you make a shortcut for this? We should definitely document this in the bootstrap-docs repo (even if we make a shortbut we must show both solutions)

[phaidon]

@Drak I think I will add this to bootstrap-zikula.js.

[ghost]

ok

[cmfcmf]

@Drak I think I will add this to bootstrap-zikula.js.

Yes, please do so.

[phaidon]

I think the current solution is not good. This could make problem with bootstrap. I think we to follow the recommendation to work with toggleClass().

[phaidon]

I thought more about this problem. The set the important tag is not stupid, because otherwise hide is not working in some situations. For example in the nav-bar with display: inline. The behavior is documented in the bootstrap doc. So I will close this issue.

[Guite]

So we use

myElem.removeClass('hide');

in order to show a certain element?

[phaidon]

@Guite yes or myElem.toggleClass('hide');

Btw. our old prototype scripts are also doing it like that. So maybe prototype has the same issue.

[craigh]

@phaidon - could you spell out how to avoid this problem for current modules in development (e.g. Dizkus)? The module used to use the z-hide class and then use prototype to add/remove the class. I have changed that in a few locations to set the original element to style='display:none' and then used jQuery .show() or .hide() as needed. Is this the correct approach (it seems to be working) or should I be doing this another way?

[phaidon]

You have to do it like in prototype: Add/remove the class:

jQuery('#id').addClass('hide');
jQuery('#id').removeClass('hide');
jQuery('#id').toggleClass('hide');

[craigh]

can you help me understand why or point me to the bootstrap doc that explains?

[phaidon]

bootstrap is using !important for the hide class. This is necessary to hide elements with a display value. For example display: inline.

jQuery is using display: none without important for the hide and show command. So jQuery.show('.hide') has no effect. That is the reason because you have to remove the hide class to show an element.

[craigh]

ah. I am not using the hide class at all. Is that better or worse? I was just doing jQuery('#myElement').hide() (which is working). what about that solution?

[phaidon]

If you dont use hide class you can use jQuery.hide() and jQuery.show().

I am using the hide class for elements that are hidden in the beginning for two reasons:

1. jQuery.hide() is sometimes a little bit slow and the user can see the element for some milliseconds.
2. If there is a no javascript fallback mode and the element should not be shown if there is no javascript.

[craigh]

that is why I use style='display:none' on the hidden elements to start with 😉

[phaidon]

that is why I use style='display:none' on the hidden elements to start with 😉

This is also okay.

[craigh]

👍

[phaidon]

I prefer to use class="hide", but it is just a matter of taste.

[nakupanda]

Without modifying any code that already written there, I would add the following after importing jQuery lib:

/**
 * The problem: https://github.com/twbs/bootstrap/issues/9881
 * 
 * This script enhances jQuery's methods: show and hide dynamically.
 * If the element was hidden by bootstrap's css class 'hide', remove it first.
 * Do similar in overriding the method 'hide'.
 */
!function($) {
    "use strict";

    var oldShowHide = {'show': $.fn.show, 'hide': $.fn.hide};
    $.fn.extend({
        show: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('hide')) {
                    $element.removeClass('hide');
                }
            });
            return oldShowHide.show.call(this);
        },
        hide: function() {
            this.each(function(index) {
                var $element = $(this);
                if ($element.hasClass('show')) {
                    $element.removeClass('show');
                }
            });
            return oldShowHide.hide.call(this);
        }
    });
}(window.jQuery);

This modifys jQuery's show / hide methods outside of any sourcecode, work fine here.

[cmfcmf]

Hi @nakupanda!
Thank you for your idea!

However, I think we should rather not add that code, because it would add a non standard way to hide and show stuff. If we added your code, we'd make jQuery.show/hide much more powerful then it really is.
//cc @craigh @phaidon