Problema con collapse en bootstrap – bootstrap

Pregunta:


<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    
<div class="panel panel-default">
<div class="panel-heading">
<a  class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#uno" href="#uno">Uno</a>

<a  class="nodecoration panel-title lead" data-toggle="collapse" data-parent="#dos" href="#dos">Dos</a>
</div>

<div id="uno" class="panel-collapse collapse">
<div class="panel-body">
Uno
</div>
</div>

<div id="dos" class="panel-collapse collapse">
<div class="panel-body">
Dos
</div>
</div>
</div>
<br>

<script>
$(".panel-heading").hover(
 function() {
    $('.panel-collapse').collapse('show');
  }, function() {
    $('.panel-collapse').collapse('hide');
  }
);
</script>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

Logro hacer que al pasar el mouse se active pero me muestra los dos juntos

/———————————/

estoy tratando de hacer un submenu usando collapse. Es algo asi:

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#uno" aria-expanded="false" aria-controls="collapseExample">Uno</a>

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#dos" aria-expanded="false" aria-controls="collapseExample">Dos</a>


<div class="collapse" id="uno">
<div class="well">
Uno
</div>
</div>

<div class="collapse" id="dos">
<div class="well">
Dos
</div>
</div>

El problema es que si doy click en el uno, abre normalmente, pero si doy click en el dos se cierra el uno y no abre el dos al menos que haga click otra vez. Se entiende? Espero me ayuden. Gracias

Preguntado por:

Willian Rivera

Ahora si ahi queda la solucion a tu problema

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <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://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <title>Hello, world!</title>
  </head>
  <body>
    
   <p>
  <a class="btn btn-primary btn-collapse" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary btn-collapse" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

<script>
$(function(){  

    $(document).ready(function(){ 
		$('.collapse').on('show.bs.collapse',function(){
		$('.collapse.show').collapse('toggle');
		});
	});

});
</script>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

En la version 3 tenes que hacer uso de los eventos que te proporciona bootstrap

La solución es ocultar el div collapse visible. Esto es posible en el evento show

$('.collapse').on('show.bs.collapse',function(){
    $('.collapse.in').collapse('toggle');
});

Aca esta el fiddle funcionando FIDDLE

Los evento de del collapse de bootstrap los podes ver aca

Saludos

Deberias utilizar el accordion:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
  
  
   <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">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
  </body>
</html>

Fuente

Related Posts:

¿Como eliminar espacio en los bordes con bootstrap? – html css bootstrap
Pregunta: Estoy intentando hacer un login con bootstrap y me surgió un problema con los bordes, cuando intento insertar un borde en el formulario se ...
No funciona JQuery en un archivo js – javascript jquery html
Pregunta: Mi problema es que no puedo usar jquery en mis archivos js, apesar que ya esta integrado en html e incluso funciona con bootstrap. Trate ...
¿Como puedo alinear verticalmente un contenido de un div con bootstrap 3? – html css bootstrap
Pregunta: Si observan el ejemplo en una resolución de 1024p podrán observar como el texto del label se extiende y el select pegado a la ...
contar sabado y domingo en un rango de fechas con datapicker – javascript bootstrap
Pregunta: Como puedo saber cuandos sabados y domingos hay en un rango de fechas 01-01-2017 & 20-01-2017 (por ejemplo), sabiendo que datapicker (bootstrap) tiene un arreglo ...
Abro un form modal en ASP.NET MVC y aparece como inactivo – asp.net bootstrap mvc
Pregunta: Buenas noches tengo una pequeña duda, estoy abriendo un form modal y cuando presiono el boton que lo abre sale como si el form modal ...
Modal no aparece completo – css bootstrap modal
Pregunta: Así aparece mi Modal: Necesito que me aparezca completo y se superponga por delante de todo. Este es mi código: <div class="row"> ...
Como cargar correctamente Jquery y Bootstrap – jquery bootstrap
Pregunta: Buenos dias a todos, estoy haciendo una web que hace uso de JQuery y de Bootstrap (incluido algunos plugins como DateTimePicker). Mas o menos ...
Ayuda con el diseño de un DIV en HTML y Bootstrap – html bootstrap
Pregunta: Vengo diseñando la parte estática de mi sistema (la pagina web), pero estoy obteniendo un pequeño error a la hora de diseñar un div, Lo ...
¿Cómo usar JS en html? – javascript html bootstrap
Pregunta: Estoy haciendo un proyecto web en netbeans con jsp y nos pidieron darle diseño por lo que estoy usando bootstrap, entiendo como usar el ...
¿Se puede poner texto a un input type radio? – html css bootstrap
Pregunta: Esta pregunta ya tiene una respuesta aquí: ...
¿Cómo cambiar background-color de un tab / pill / nav con clase .active en bootstrap 4? – bootstrap bootstrap-4
Pregunta: Si ejecuta el siguiente script verá que por defecto el tab / pill / nav activo tiene clase .active y por tanto el color ...
Agregar icono fa en una caja de texto – bootstrap
Pregunta: Buena tarde tengo el siguiente codigo html, estoy usando bootstrap 4 <div class="form-group has-feedback"> <span class="fa fa-user form-control-feedback"></span> <input type="text" class="form-control" placeholder="Escribe un nombre"> </div> Lo que quiero hacer ...
Como enviar correos desde codeigniter con phpmailer? – php javascript bootstrap
Pregunta: Hola buenos dias veran soy muy nuevo en esto y recientemente me encargaron la tarea de mandar correos. Tengo que crear un formulario que ...
Validar rango de entrada y salida de reserva. Bootstrap datepicker – jquery bootstrap formularios
Pregunta: mi problema es algo básico. Tengo un sistema de reserva donde ingresan la fecha de entrada y salida. Tengo validado que la fecha de ...
Bootstrap – datetimepicker inline no funciona – javascript jquery html5
Pregunta: Necesito visualizar el calendario en forma inline, asi: Este es el codigo que tengo: <div style="overflow:hidden;"> <div class="form-group"> ...

Add a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *