0

Actualmente tengo varias paginas que tienen el mismo collapse, pero solo funciona cuando en la primera pagina, cuando cambio de opcion de menu hace show pero no realiza el hide.

Gracias.

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<a class="btn btn-default" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" role="button" href="#collapse-12" id="apbtndat"> <i class="glyphicon glyphicon-chevron-down"></i></a>
    <div class="collapse" id="collapse-12">
        <ul class="list-group text-right" id="aplistdata">
            <li class="list-group-item"><span style="font-size:24px">Hola</span><span id="aplistnombre" style="font-size:24px">Natalia, </span><span> A continuación tus datos.</span><span class="aplistdatafn"> </span></li>
            <li class="list-group-item"><span>prueba:</span><span class="aplistnum">150 </span><span class="aplistdatafn"> </span></li>
            <li class="list-group-item"><span>prueba:</span><span class="aplistnum">50 </span><span class="aplistdatafn"> </span></li>
            <li class="list-group-item"><span>Prueba:</span><span class="aplistnum">134 </span><span class="aplistdatafn"> </span></li>
            <li class="list-group-item"><span>Prueba:</span><span style="font-size:24px">10/Mar/17 </span><span class="aplistdatafn"> </span></li>
        </ul>
    </div>
   </body

2 respuestas 2

2

Problemas:

  • CSS: Solo has incluido el theme de Bootstrap. Falta el archivo bootstrap.min.css.

  • JS: Debes incluir primero jQuery y luego Bootstrap.

Solución:

<!-- AQUI - Incluimos el CSS de Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
<!-- AQUI - Incluimos el JS de jQuery primero -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a class="btn btn-default" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" role="button" href="#collapse-12" id="apbtndat"> <i class="glyphicon glyphicon-chevron-down"></i></a>
<div class="collapse" id="collapse-12">
    <ul class="list-group text-right" id="aplistdata">
        <li class="list-group-item"><span style="font-size:24px">Hola</span><span id="aplistnombre" style="font-size:24px">Natalia, </span><span> A continuación tus datos.</span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>prueba:</span><span class="aplistnum">150 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>prueba:</span><span class="aplistnum">50 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>Prueba:</span><span class="aplistnum">134 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>Prueba:</span><span style="font-size:24px">10/Mar/17 </span><span class="aplistdatafn"> </span></li>
    </ul>
</div>

0

Estimadisimo, aca le dejo su código con los CDN bajados calientitos de bootstrap. Saludos.

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>

<!-- Este es el main css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Este es el estilo opcional -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Esta es la última compilación del javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>                      

<!-- Este es el jquery desde el gigante google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


</head>
<body>
<a class="btn btn-default" data-toggle="collapse" aria-expanded="false" aria-controls="collapse-1" role="button" href="#collapse-12" id="apbtndat"> <i class="glyphicon glyphicon-chevron-down"></i></a>
<div class="collapse" id="collapse-12">
    <ul class="list-group text-right" id="aplistdata">
        <li class="list-group-item"><span style="font-size:24px">Hola</span><span id="aplistnombre" style="font-size:24px">Natalia, </span><span> A continuación tus datos.</span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>prueba:</span><span class="aplistnum">150 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>prueba:</span><span class="aplistnum">50 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>Prueba:</span><span class="aplistnum">134 </span><span class="aplistdatafn"> </span></li>
        <li class="list-group-item"><span>Prueba:</span><span style="font-size:24px">10/Mar/17 </span><span class="aplistdatafn"> </span></li>
    </ul>
</div>
</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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