Collapse with Bootstrap 3 and jQuery does not work

Navigation
0

Currently I have several pages that have the same collapse, but it only works when on the first page, when I change the menu option it does show but it does not perform the hide.

Thank you. 

<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
    
asked by dkgpp 16.03.2017 в 15:40
source

2 answers

2

Problems:

  • CSS : You have only included the theme of Bootstrap . Missing file bootstrap.min.css .

  • JS : You must first include jQuery and then Bootstrap .

Solution: 

<!-- 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>
    
answered by 16.03.2017 в 15:56
0

Dear, here I leave your code with the CDN lowered warm bootstrap. Greetings. 

<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>
    
answered by 16.03.2017 в 21:04
Problem with queries in related databases Error with window.onload with sprites