Skip to main content
se eliminó 1 carácter en el cuerpo
Origen Enlace
Alberto Siurob
  • 6.5k
  • 7
  • 33
  • 72

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. HéchateÉ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>

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. Hé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>

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>

Origen Enlace
Alberto Siurob
  • 6.5k
  • 7
  • 33
  • 72

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. Hé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>