0

quisiera ver si me pueden ayudar con el siguiente problema que tengo, tengo 2 botones los cuales al oprimirlos muestran información diferente, pero quiero que si no se oprime ninguno estén ocultos y al oprimir uno u otro se muestre la información, y la otra se oculte, les dejo el código que estoy utilizando, si pudieran ayudarme se los agradecería.

<button id="cambia" data-toggle="tooltip" data-placement="top" title="Aprobar" type="button" class="btn btn-success bSi"></button>
<button id="cambiaN" data-toggle="tooltip" data-placement="top" title="Negar" type="button" class="btn btn-danger bNo"></button>

<script>
$(document).ready(function(){
$("#cambia").click(function(){
$("#textoAprobado").toggle(1000);
});
});
</script>


<div id="textoAprobado" class="col-md-6 alert alert-success alert-dismissible fade show" role="alert">
<center>
<i class="fas fa-check-circle votos"></i><hr>¡Has votado a favor de este apoyo!
</center>
</div>

<script>
$(document).ready(function(){
$("#cambiaN").click(function(){
$("#textoAprobadoN").toggle(1000);
});
});
</script>


<div id="textoAprobadoN" class="col-md-6 alert alert-danger alert-dismissible fade show" role="alert">
<center>
<i class="fas fa-check-circle votos"></i><hr>¡Has votado en contra de este apoyo!
</center>
</div>
</center>
1
  • Hola :), puedes especificar qué version que JQuery y Bootstrap estás utilizando? ¿Deseas usar el toogle de Bootstrap o el de JQuery? Si deseas el de bootstrap, entonces no debes invocar el toogle de JQuery. Si deseas el de JQuery, entonces el atributo data-toggle sobra Commented el 6 sept. 2018 a las 15:10

1 respuesta 1

2

Primero tienes que ocultar los DIVs (ambos) que tienen el texto. Ya después dependiendo que elijan, muestras uno y ocultas el otro.

Te dejo el JS con comentarios

PD. Se puede simplificar más el código, sin embargo te enredarás más. Échate un clavado a cómo funciona Bootstrap, por el momento el problema está resuelto. Tutorial Bootstrap

Saludos

//Lo mismo que document.ready
$(function(){
  
  //Trigger del texto a favor
  $(document).on('click','#cambia',function(){
    //Se muestra que votaste a favor
    $('#textoAprobado').show('fast');
    //Se oculta que votaste en contra
    $('#textoAprobadoN').hide('fast');
  });
  
  //Trgger del texto en contra
  $(document).on('click','#cambiaN',function(){
    //Se oculta que votaste a favor
    $('#textoAprobado').hide('fast');
    //Se muestra que votaste en contra
    $('#textoAprobadoN').show('fast');
  });

});
#textoAprobado, #textoAprobadoN{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cambia" data-toggle="tooltip" data-placement="top" title="Aprobar" type="button" class="btn btn-success bSi">Texto aprobado</button>
<button id="cambiaN" data-toggle="tooltip" data-placement="top" title="Negar" type="button" class="btn btn-danger bNo">Texto aprobado N</button>


<div id="textoAprobado" class="col-md-6 alert alert-success alert-dismissible fade show" role="alert">
<center>
<i class="fas fa-check-circle votos"></i><hr>¡Has votado a favor de este apoyo!
</center>
</div>


<div id="textoAprobadoN" class="col-md-6 alert alert-danger alert-dismissible fade show" role="alert">
<center>
<i class="fas fa-check-circle votos"></i><hr>¡Has votado en contra de este apoyo!
</center>
</div>

4
  • Hola Alberto, la respuesta es perfecta :), ¿puedo sugerirte corregir un error de ortografía? Commented el 6 sept. 2018 a las 15:15
  • Claro, dime dónde corrijo. Commented el 6 sept. 2018 a las 15:16
  • Échate en lugar de Héchate :) Commented el 6 sept. 2018 a las 15:17
  • @AlbertoSiurob ¡Me has salvado, justo lo que buscaba, muchas gracias, saludos!
    – R.C. Ana
    Commented el 6 sept. 2018 a las 15:21

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.