2

Tengo un problema con esta función ya que no me permite utilizarla mas de dos veces es decir el botón si aparece en todas mis opciones pero al presionar otro botón solo se desplaza la información del primero, soy muy nueva programando y aun no le entiendo mucho a JavaScript, agradecería su ayuda.

<div class="hgroup">
   <h4>Neumología</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
</div>
<button type="button" class="btn btn-xs btn-primary" data-toggle="collapse" data-target="#demo">
<span class="glyphicon glyphicon-collapse-down"></span> Open
</button>   
<div id="demo" class="collapse">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
</div>

<script> 
$(document).ready(function() {
    $("#demo").on("hide.bs.collapse", function() {
        $(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
    });
    $("#demo").on("show.bs.collapse", function() {
        $(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
    });
});
</script>
</div>

1
  • Bienvenida a StackOverflow en español, lee el apartado Cómo Preguntar para elaborar una pregunta de calidad. Deberías compartir el código con el que estás intentando solucionar tu problema para que podamos ayudarte.
    – FederHico
    Commented el 17 may. 2017 a las 16:41

1 respuesta 1

1

Bienvenida a SOF, el problema que tienes esq siempre apuntas al primero, cuando ejecutas un método recuerda que cuando utilizas el objeto this te refieres al objeto actual en base a esa defición es posible hacer esto:

$(function(){ $('.control-colapse').click(function(){ $(this).parent().find('.collapse').toggle(); }); })

Te dejo un ejemplo para que puedas adaptarlo a tu código.

$(function(){
	$('.control-colapse').click(function(){
  	$(this).parent().find('.collapse').toggle();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-group">
  <div class="hgroup">
   <h4>Neumología</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 1</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 2</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

<div class="main-group">
  <div class="hgroup">
   <h4>DIV 3</h4>
   <!--<p>Dr. Avis Stankovic</p> -->
  </div>
  <button type="button" class="btn btn-xs btn-primary control-colapse" data-toggle="collapse" data-target="#demo">
  <span class="glyphicon glyphicon-collapse-down"></span> Open
  </button>   
  <div id="demo" class="collapse">
     DIV 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   
  </div>
</div>

Suerte!

6
  • Gracias, aunque no funciona T.T Commented el 17 may. 2017 a las 18:05
  • @VinissaCarballo que error te sale? Commented el 17 may. 2017 a las 18:39
  • Creo que tiene que ver con la función como te dije apenas estoy empezando y no se muy bien como declarar y todo, ya funciona en todas las divisiones sin embargo al desplegar una se despliega la primera y al ocultar se bloquean y ya no aparecen los botones. Commented el 17 may. 2017 a las 18:44
  • Manejas JavaScript o Css? te recomiendo que veas primero videos sobre esos temas, no es muy recomendable lanzarse a el diseño utilizando en una boostrap, debes saber que pasa tras bambalinas para que no te frustres muy rápido (Al final de cuentas te vas a frustrar pero eso es otra cosa). Commented el 17 may. 2017 a las 19:03
  • Es que si le entiendo masomenos D: hahahaha bueno ya lo soluciones le puse CollapseAll Commented el 17 may. 2017 a las 20:52

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.