Hide and show content when pressing buttons?

Question

Hide and show content when pressing buttons?

Navigation

#1 by (2 votes)

0

I would like to see if you can help me with the following problem that I have, I have 2 buttons which when pressed show different information, but I want that if none are pressed they are hidden and by pressing one or the other the information is displayed, and the another one is hidden, I leave the code that I am using, if you could help me I would appreciate it.

<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>

javascript html5

asked by R.C. Ana 06.09.2018 в 16:50

source

1 answer

SELECT pii2 FROM 'surveys_egresados' WHERE pii2 = 'Very good' BETWEEN date = '2017-01-01' AND '2017-01-01'; [closed] Help with clipboard.js and td cells / td

score 2 · Accepted Answer

First you have to hide the DIVs (both) that have the text. And then depending on who they choose, you show one and hide the other.

I leave you the JS with comments

PD. You can simplify the code more, however, you will become more entangled. Take a dive into how Bootstrap works, at the moment the problem is solved. Bootstrap Tutorial

Greetings

//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>