Digamos que creo un elemento HTML como este,

<div id="my-div" class="hidden">Hello, TB3</div>
<div id="my-div" class="hide">Hello, TB4</div>
<div id="my-div" class="d-none">Hello, TB4</div>

¿Cómo podría mostrar y ocultar ese elemento HTML de jQuery / Javascript?

JavaScript:

$(function(){
  $("#my-div").show();
});

Resultado: (con cualquiera de estos).

Me gustaría que los elementos anteriores estén ocultos.

¿Cuál es la forma más simple de ocultar elementos usando Bootstrap y mostrarlos usando jQuery?

La respuesta correcta

Bootstrap 4.x

Bootstrap 4.x usa la nueva .d-noneclase . En lugar de usar cualquiera .hidden , o .hidesi está usando Bootstrap 4.x use .d-none.

<div id="myId" class="d-none">Foobar</div>

• Para mostrarlo: $("#myId").removeClass('d-none');
• Para esconderlo: $("#myId").addClass('d-none');
• Para alternarlo: $("#myId").toggleClass('d-none');

(gracias al comentario de Fangming)

Bootstrap 3.x

Primero, ¡no lo uses .hide! Uso .hidden. Como otros han dicho, .hideestá en desuso,

.hide está disponible, pero no siempre afecta a los lectores de pantalla y está en desuso a partir de v3.0.1

En segundo lugar, use .toggleClass () , .addClass () y .removeClass () de jQuery.

<div id="myId" class="hidden">Foobar</div>

• Para mostrarlo: $("#myId").removeClass('hidden');
• Para esconderlo: $("#myId").addClass('hidden');
• Para alternarlo: $("#myId").toggleClass('hidden');

No use la clase css .show, tiene un caso de uso muy pequeño. Las definiciones de show, hiddeny invisibleestán en los documentos .

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  visibility: hidden;
}

Simplemente:

$(function(){
  $("#my-div").removeClass('hide');
});

O si de alguna manera quieres que la clase siga ahí:

$(function(){
  $("#my-div").css('display', 'block !important');
});

Use bootstrap .collapse en lugar de .hidden

Más adelante en JQuery puedes usar .show () o .hide () para manipularlo

Esta solución está en desuso. Use la solución más votada.

La hideclase es útil para mantener el contenido oculto en la carga de la página.

Mi solución a esto es durante la inicialización, cambie a jquery's hide:

$('.targets').hide().removeClass('hide');

Entonces show()y hide()debería funcionar como normal.

Otra forma de abordar esta molestia es crear su propia clase CSS que no establezca lo importante al final de la regla, así:

.hideMe {
    display: none;
}

y se usa así:

<div id="header-mask" class="hideMe"></div>

y ahora los trabajos de ocultación de jQuery

$('#header-mask').show();

El método que describió @ dustin-graham es cómo lo hago yo también. Recuerde también que bootstrap 3 ahora usa "oculto" en lugar de "ocultar" según su documentación en getbootstrap . Entonces haría algo como esto:

$(document).ready(function() {
    $('.hide').hide().removeClass('hide');
    $('.hidden').hide().removeClass('hidden');
});

Luego, siempre que use jQuery show()y los hide()métodos, no habrá conflicto.

Inicie el elemento con como tal:

<div id='foo' style="display: none"></div>

Y luego, use el evento que desea mostrar, como tal:

$('#foo').show();

La forma más sencilla de ir, creo.

HTML:

<div id="my-div" class="hide">Hello, TB3</div>

Javascript:

$(function(){
    //If the HIDE class exists then remove it, But first hide DIV
    if ( $("#my-div").hasClass( 'hide' ) ) $("#my-div").hide().removeClass('hide');

    //Now, you can use any of these functions to display
    $("#my-div").show();
    //$("#my-div").fadeIn();
    //$("#my-div").toggle();
});

Me gusta usar el toggleClass:

var switch = true; //it can be an JSON value ...
$("#my-div").toggleClass('hide', switch);

$(function(){

$("#my-div").toggle();

$("#my-div").click(function(){$("#my-div").toggle()})

})

// ni siquiera tiene que establecer el #my-div .hidenor !important, solo pegue / repita la alternancia en la función de evento.

Recientemente me encontré con esto al actualizar de 2.3 a 3.1; animaciones nuestra jQuery ( slideDown ) rompieron porque estábamos poniendo ocultar los elementos de la plantilla de página. Seguimos la ruta de la creación de versiones espaciadas por nombre de las clases Bootstrap que ahora llevan la regla fea ! Importante .

.rb-hide { display: none; }
.rb-pull-left { float: left; }
etc...

La respuesta de Razz es buena si estás dispuesto a reescribir lo que has hecho.

Estaba en el mismo problema y lo resolvió con lo siguiente:

/**
 * 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);

Tíralo cuando Bootstrap viene con una solución para este problema.

En bootstrap 4 puedes usar d-noneclass para ocultar un elemento por completo. https://getbootstrap.com/docs/4.0/utilities/display/

Actualización : De ahora en adelante, uso .collapsey $('.collapse').show().

Para Bootstrap 4 Alpha 6

Para Bootstrap 4 tienes que usar .hidden-xs-up.

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes

Las clases .hidden - * - up ocultan el elemento cuando la ventana está en el punto de interrupción dado o más ancho. Por ejemplo, .hidden-md-up oculta un elemento en viewports medianos, grandes y extragrandes.

También hay un hiddenatributo HTML5.

https://v4-alpha.getbootstrap.com/content/reboot/#html5-hidden-attribute

HTML5 agrega un nuevo atributo global llamado [oculto], que tiene el estilo de visualización: ninguno de forma predeterminada. Tomando prestada una idea de PureCSS, mejoramos este valor predeterminado haciendo que [oculto] {display: none! Important; } para ayudar a evitar que su pantalla se anule accidentalmente. Si bien [hidden] no es compatible de forma nativa con IE10, la declaración explícita en nuestro CSS soluciona ese problema.

<input type="text" hidden>

También hay .invisibleque afecta el diseño.

https://v4-alpha.getbootstrap.com/utilities/invisible-content/

La clase .invisible se puede usar para alternar solo la visibilidad de un elemento, lo que significa que su visualización no se modifica y el elemento aún puede afectar el flujo del documento.

hide y hidden están en desuso y luego se eliminan, ya no existen en las nuevas versiones. Puede usar las clases d-none / d-sm-none / invisible, etc., según sus necesidades. La razón probable por la que se eliminaron es porque hidden / hide es un poco confuso en el contexto CSS. En CSS, ocultar (oculto) se utiliza para la visibilidad, no para mostrar. La visibilidad y la visualización son cosas diferentes.

Si necesita una clase de visibilidad: oculta, entonces necesita una clase invisible de las utilidades de visibilidad.

Verifique a continuación las utilidades de visibilidad y visualización:

https://getbootstrap.com/docs/4.1/utilities/visibility/

https://getbootstrap.com/docs/4.1/utilities/display/

Use el siguiente fragmento de código para Bootstrap 4, que extiende jQuery:

(function( $ ) {

    $.fn.hideShow = function( action ) {

        if ( action.toUpperCase() === "SHOW") {
            // show
            if(this.hasClass("d-none"))
            {
                this.removeClass("d-none");
            }

            this.addClass("d-block");

        }

        if ( action.toUpperCase() === "HIDE" ) {
            // hide
            if(this.hasClass("d-block"))
            {
                this.removeClass("d-block");
            }

            this.addClass("d-none");
      }

          return this;
    };

}( jQuery ));

1. Ponga el código anterior en un archivo. Supongamos que "myJqExt.js"

2. Incluya el archivo después de que se haya incluido jQuery.

3. Úselo usando la sintaxis

   $ (). hideShow ('hide');

   $ (). hideShow ('show');

Espero que les sea útil. :-)

Bootstrap, JQuery, espacios de nombres ... Lo que está mal con un simple:

var x = document.getElementById('my-div');
x.className.replace(/\bhide\b/, ''); //remove any hide class
x.style.display = ''; //show
x.style.display = 'none'; //hide

Puede crear una pequeña función auxiliar, compatible con KISS:

function mydisplay(id, display) {
    var node = (typeof id == 'string') ? document.getElementById(id) : id;
    node.className.replace(/\bhide\b/, '');
    if (node) {
        if (typeof display == 'undefined') {
            display = (node.style.display != 'none');
        } else if (typeof display == 'string' && display == 'toggle') {
            display = mydisplay(node, !mydisplay(node));
        } else {
            node.style.display = (display) ? '' : 'none';
        }
    }
    return display;
}
is_hidden = mydisplay('my-div'); //actual state
mydisplay('my-div', false); //hide
mydisplay('my-div', true); //show
mydisplay('my-div', 'toggle'); //toggle state

Según las respuestas anteriores, acabo de agregar mis propias funciones y esto no entra en conflicto con las funciones jquery disponibles como .hide (), .show (), .toggle (). Espero eso ayude.

    /*
     * .hideElement()
     * Hide the matched elements. 
     */
    $.fn.hideElement = function(){
        $(this).addClass('hidden');
        return this;
    };

    /*
     * .showElement()
     * Show the matched elements.
     */
    $.fn.showElement = function(){
        $(this).removeClass('hidden');
        return this;
    };

    /*
     * .toggleElement()
     * Toggle the matched elements.
     */
    $.fn.toggleElement = function(){
        $(this).toggleClass('hidden');
        return this;
    };

Resolví mi problema editando el archivo CSS de Bootstrap, vea su documento:

.esconder:

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1

.hide {
  display: none !important;
}

.hidden es lo que se supone que debemos usar ahora, pero en realidad es:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

El jQuery "fadeIn" no funcionará debido a la "visibilidad".

Entonces, para el último Bootstrap, .hide ya no está en uso, pero todavía está en el archivo min.css. así que dejé .hidden TAL CUAL y simplemente eliminé "! important" de la clase ".hide" (que se supone que está en desuso de todos modos). pero también puede anularlo en su propio CSS, solo quería que toda mi aplicación actuara igual, así que cambié el archivo CSS de Bootstrap.

Y ahora funciona jQuery "fadeIn ()".

La razón por la que he hecho esto en comparación con las sugerencias anteriores es porque cuando "removeClass ('. Hide')" el ​​objeto se muestra inmediatamente y omite la animación :)

Espero que haya ayudado a otros.

☀️ La respuesta más correcta

En Bootstrap 4 ocultas el elemento:

<p id="insufficient-balance-warning" class="d-none alert alert-danger">Pay me</p>

🛑 Entonces, seguro, puedes mostrarlo literalmente con:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').removeClass('d-none');
}

💓 Pero si lo hace de forma semántica, transfiriendo la responsabilidad de Bootstrap a jQuery, entonces puede usar otras sutilezas de jQuery como desvanecimiento:

if (pizzaFundsAreLow) {
  $('#insufficient-balance-warning').hide().removeClass('d-none').fadeIn();
}

Twitter Bootstrap proporciona clases para alternar contenido, consulte https://github.com/twbs/bootstrap/blob/3ee5542c990817324f0a07b97d01d1fe206fd8d6/less/utilities.less .

Soy completamente nuevo en jQuery, y después de leer sus documentos, encontré otra solución para combinar Twitter Bootstrap + jQuery.

Primero, la solución para 'ocultar' y 'mostrar' un elemento (clase wsis-collapse) al hacer clic en otro elemento (clase wsis-toggle), es usar .toggle .

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle();
    });
});

Ya ha ocultado el elemento .wsis-collapseutilizando la clase Twitter Bootstrap (V3) .hiddentambién:

.hidden {
  display: none !important;
  visibility: hidden !important;
}

Cuando hace clic en .wsis-toggle, jQuery agrega un estilo en línea:

display: block

Debido a que !importanten Twitter Bootstrap, este estilo en línea no tiene ningún efecto, por lo que debemos eliminar la .hiddenclase, ¡pero no lo recomendaré .removeClasspara esto! Porque cuando jQuery va a ocultar algo nuevamente, también agrega un estilo en línea:

display: none

Esto no es lo mismo que la clase .hidden de Twitter Bootstrap, que también está optimizada para AT (lectores de pantalla). Entonces, si queremos mostrar el div oculto, debemos deshacernos de la .hiddenclase de Twitter Bootstrap, por lo que nos deshacemos de las declaraciones importantes, pero si lo ocultamos nuevamente, ¡queremos .hiddenrecuperar la clase nuevamente! Podemos usar [.toggleClass] [3] para esto.

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden" );
    });
});

De esta manera, sigue usando la clase oculta cada vez que se oculta el contenido.

La .showclase en TB es en realidad la misma que el estilo en línea de jQuery, ambos 'display: block'. Pero si la .showclase en algún momento será diferente, entonces simplemente agrega esta clase también:

jQuery(document).ready(function() {
    jQuery(".wsis-toggle").click(function(){
        jQuery(".wsis-collapse").toggle().toggleClass( "hidden show" );
    });
});