Skip to main content
se añadieron 1455 caracteres en el cuerpo
Origen Enlace
Juan
  • 1.7k
  • 4
  • 25
  • 39

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">Clickid="show" class="btn">Click para Mostrar</a>
<br><br>
<div id="element" style="display: none;">
  



<button Esteclass="btn esbtn-primary" untype="button" divdata-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>

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

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

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  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>

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>

Origen Enlace
Juan
  • 1.7k
  • 4
  • 25
  • 39

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

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

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  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>