0

Tengo un <div> que cuando entro o recargo la página viene abierto, y necesito que cuando entro por primera vez o recargue la página, el <div> venga cerrado.

Este es mi código

<div class="card">
    <div class="card-header header-elements-inline">
        <div class="header-elements">
            <div class="list-icons">
                <a class="list-icons-item" data-action="collapse"></a>
                <a class="list-icons-item" data-action="reload"></a>
                <a class="list-icons-item" data-action="remove"></a>
            </div>
        </div>
    </div>

    <div class="card-body">
        <h6 class="font-weight-semibold">Titulo</h6>
        <p class="mb-3">Aquí va mi información</p>
    </div>
</div>

Para hacerme entender mejor:

introducir la descripción de la imagen aquí

¿Cómo lograr el efecto que necesito?

4
  • 1
    Hola Karli, Ya que estas utilizando Boostrap solo necesitas jugar con las propiedades class="collapse show" y aria-expanded="true"
    – Ragnar
    el 7 may. 2021 a las 20:06
  • Estas utilizando bootstrap? Qué versión? el 7 may. 2021 a las 20:06
  • Hola @Nor, muchas gracias por responder, pero disculpa mi ignorancia, como hago ese juego, donde debo incluir eso?
    – Karli
    el 7 may. 2021 a las 20:08
  • @AlejandroRivas, la version es Bootstrap v4.3.1
    – Karli
    el 7 may. 2021 a las 20:11

2 respuestas 2

2

Puedes seguir la documentacion de Bootstrap referente al componente Collapse

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">
                <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
                    aria-controls="collapseOne">
                    Titulo item #1
                </button>
            </h5>
        </div>

        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Aquí va mi información Contenido del Item #1
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
                    aria-expanded="false" aria-controls="collapseTwo">
                    Titulo Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Aquí va mi información Contenido del Item #2
            </div>
        </div>
    </div>
    
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>

Y si lo que quieres es que de entrada no te muestre desplegado el contenido del entonces a tu elemento le quitas la clase Show

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<script src="https://kit.fontawesome.com/b0d8aefb17.js" crossorigin="anonymous"></script>




<div id="accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h5 class="mb-0">

                <div class="container" style="text-align:right">
                <a class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                    aria-controls="collapseOne"><i class="fas fa-chevron-down fa-lg"></i></a> <i class="fas fa-sync-alt 2x"></i>
                </div>
                
            </h5>
        </div>

        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                Contenido del titulo #1
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
                <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
                    aria-expanded="false" aria-controls="collapseTwo">
                    Titulo Item #2
                </button>
            </h5>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
                Contenido del Item #2
            </div>
        </div>
    </div>
    
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>

Importante agregar las librerias de Popper.js y Jquery antes del cierre de tu elemento </body>

Edit: A lo que menciona el compañero, no veo porque eso sea un problema si se puede manejar todo a placer; edito segundo bloque de codigo.

3
  • El problema que veo aquí es que él tiene sus propios botones, pero sin duda esta funcionalidad es buena pues no requiere mayor programación el 7 may. 2021 a las 20:28
  • Encuentro que tu nueva solución es eficiente, ahora sólo es cuestión de gustos :D el 7 may. 2021 a las 20:44
  • 1
    Muchas gracias amigo, a ambos por la ayuda brindada
    – Karli
    el 7 may. 2021 a las 20:53
0

Agrega a tu CSS.

Este lo usamos para que inicialmente tu contenido esté oculto.

.card-body{
  display: none;
}

Modifica tu HTML

Agregué unas referencias entre tus botones y la card a la que corresponden para poder identificarlas. Así tu siguiente card debes reemplazar los "1" por "2"

    <div class="card">
      <div class="card-header header-elements-inline">
         <div class="header-elements">
             <div class="list-icons">
                <a class="list-icons-item" data-action="collapse" data-card="1"></a>
                <a class="list-icons-item" data-action="reload" data-card="1"></a>
                <a class="list-icons-item" data-action="remove" data-card="1"></a>
            </div>
          </div>
       </div>

       <div class="card-body" id="card_1">
         <h6 class="font-weight-semibold">Titulo</h6>
         <p class="mb-3">Aquí va mi información</p>
       </div>
     </div>

Agrega JS

El JS va a mostrar el contenido, pero adicionalmente debes agregar una línea que modifique el sentido de la flecha de tu botón. Si te das cuenta esto lee tu referencia y busca la card que debe mostrar, esta función sirve para todas las cards.

Estoy utilizando JQuery, dado que tu ya lo tienes incluido en el bundle de Bootstrap puedes aprovecharlo

$(".list-icons-item").click(function(){
  var card = $(this).attr("data-card")
  var action = $(this).attr("data-action")
  if (action == "collapse"){
      $("#card_" + card).show()
  }
});
3
  • 1
    Muchas gracias amigo, me ayudaste mucho
    – Karli
    el 7 may. 2021 a las 20:47
  • Gracias, no dejes de revisar la respuesta de @Nor tambien es muy buena! el 7 may. 2021 a las 20:49
  • 1
    También la estoy viendo
    – Karli
    el 7 may. 2021 a las 20:52

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.