0

Necesito ocultar todos los collapse de bootstrap en un página donde mediante un ciclo creo collapse y botones con id aleatorio.

foreach ($directories as $file){
   $aleatorio = rand(); // El aleatorio para el collapse

   echo '<a class="btn btn-link" data-toggle="collapse" href="#demo'.$aleatorio.'">Mostrar/Ocultar</a>'; //Boton de collapse

   echo '<div id="demo'.$aleatorio.'" class="collapse in">'; //Div del collapse inicia
      echo $file[0];
   echo '</div>'; //Div del collapse finaliza }
1

2 respuestas 2

0

Podrias hacer algo asi con jquery:

A tu boton le pones un id que va a ser leido por el scrip cuando le des click, al contenedor de los collapse le pones un id que va a ser el que toma el script para ocultar o mostrar. Luego creas una variable como bandera para si es 0 quiere decir que las cosas no se estan mostrando, si es 1 es q estan a la vista y dsp jugas con eso, al dar click al boton pasas la variable a 1 y mostras el contenido del div y le cambias el texto para que ahora diga OCULTAR, cuando le volves a dar click pasas la variable a 0, ocultas el div y pasas el texto del boton a MOSTRAR

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>

<a href="#" id="show" class="btn">Click para Mostrar</a>
<br><br>
<div id="element" style="display: none;">
  



<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false"
aria-controls="collapseExample1">
  CLICK PARA ABRIR COLLAPSE UNO
</button>
<div class="collapse" id="collapseExample1">
  <div class="well">
 COLLAPSE UNO
  </div>
</div>

<br><br>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" 
aria-controls="collapseExample2">
  CLICK PARA ABRIR COLLAPSE DOS
</button>
<div class="collapse" id="collapseExample2">
  <div class="well">
COLLAPSE DOS
  </div>
</div>

<br><br>

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample3" aria-expanded="false"
aria-controls="collapseExample3">
  CLICK PARA ABRIR COLLAPSE TRES
</button>
<div class="collapse" id="collapseExample3">
  <div class="well">
 COLLAPSE TRES
  </div>
</div>


</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function(){

  var estado = 0;

  $("#show").click(function(){

  	if (estado == 0) {
  		estado++
  		$("#show").text("Click para Ocultar")
  		$("#element").show();
  	}
  	else{
  		estado--
  		$("#show").text("Click para Mostrar")
  		$("#element").hide();
  	}

  });
});
</script>

</body>
</html>

9
  • Gracias por la ayuda, pero no es lo que estoy buscando, yo puedo ocultar por defecto un div (del que conozca el id) con collapse, pero tengo un ciclo en el que creo los id aleatoriamente y lo que quiero es generalizar y que todos los collapse esten ocultos por defecto... Gracias nuevamente...
    – Carli
    Commented el 6 dic. 2018 a las 17:32
  • Proba metiendo todos los collapses dentro de un div y a ese div le pones el id de que oculte o no el contenido <div id="element" style="display: none;"> FUNCION QUE CREA TODOS LOS COLLAPSE </div>
    – Juan
    Commented el 6 dic. 2018 a las 17:34
  • Si eso no te sirve, subi por favor la estructura html donde reenderizas eso collapse para ver como los estas sumando al codigo y ahi va a ser mas facil guiarte
    – Juan
    Commented el 6 dic. 2018 a las 17:36
  • Tengo una funcion que dada una ruta busca los directorios y los archivos que tiene y por cada directorio ejecuta la misma funcion para buscar los directorios y archivos dentro de el y asi recursivamente pero el contenido de cada directorio lo pongo dentro de un div con id unico y lo muestro u oculto mediante un link a ese id, pero los quisiera todos por defecto ocultos y no como viene por defecto... No se si me hago entender...
    – Carli
    Commented el 6 dic. 2018 a las 18:04
  • Modifique mi respuesta, algo mas o menos asi? Si no vas a tener que buscar algo similar a lo que necesita sy mostrarlo o explicar mejor la pregunta porque me pierdo jaja
    – Juan
    Commented el 6 dic. 2018 a las 18:14
-1

Valdría con quitar la clase in en el segundo echo (el del div) de cada iteración.

Esta clase indica si quieres mostrar el collapse abierto. Si no está, queda cerrado.

Yo al id no le pondría un aleatorio sino un secuencial, ya que se podría repetir.

Saludos.

0

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.