Ocultar div de forma predeterminada y mostrarlo al hacer clic con bootstrap

Solución:

Aquí propongo una forma de hacer esto utilizando exclusivamente la funcionalidad incorporada del framework Bootstrap.

1. Debes asegurarte de que el objetivo div tiene una identificación.
2. Bootstrap tiene un class “colapso”, esto ocultará su bloque por defecto. Si desea que su div sea plegable Y se muestre de forma predeterminada, debe agregar la clase “in” al colapso. De lo contrario, el comportamiento de alternancia no funcionará correctamente.
3. Luego, en su hipervínculo (también funciona para botones), agregue un atributo href que apunte a su div objetivo.
4. Finalmente, agregue el atributo data-toggle="collapse" para indicarle a Bootstrap que agregue un script de alternancia apropiado a esta etiqueta.

Aquí hay una muestra de código que se puede copiar y pegar directamente en una página que ya incluye el marco Bootstrap (hasta la versión 3.4.1):

<a href="https://foroayuda.es/#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
    This div (Bar) is shown by default and can toggle
</div>

Solo agrega agua style="display:none"; al <div>

Violines digo: http://jsfiddle.net/krY56/13/

jQuery:

function toggler(divId) {
    $("#" + divId).toggle();
}

Preferido tener una clase CSS .hidden

.hidden {
     display:none;
}

Prueba este:

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>

---

---

Utiliza Nuestro Buscador