1
Hello, I was recently looking at a site and I found very interesting a selection/filter system in the contacts tab (https://www.evoluaja.com/contato/)
When you open the contact page, you are asked to select whether it is about some training you have acquired or not, each option has a different part. How can I create this using html and css?
0
Use a CSS rule as the selector ~
.nao,
.sim {
display: none;
}
#s:checked ~ .sim {
display: block;
}
#n:checked ~ .nao {
display: block;
}
<form action="">
<input type="radio" name="rd" id="n"> não
<input type="radio" name="rd" id="s"> sim
<div class="nao">
clicou não
</div>
<div class="sim">
clicou sim
</div>
</form>0
Can be done with jquery, using the function change to recognise a change in the element, slideDown to display the element and slideUp to hide.
$('input:radio[name="radio"]').change(function() {
const value = $(this).val();
$('p').slideUp('slow');
$(`p.r${value}`).slideDown('slow');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radio" value="1"> Radio 1 |
<input type="radio" name="radio" value="2"> Radio 2
<p class="r1" style="display: none">Primeiro radio selecionado</p>
<p class="r2" style="display: none">Segundo radio selecionado</p>Reference: jQuery Effects - Sliding
Browser other questions tagged html css html5 css3
You are not signed in. Login or sign up in order to post.
Your question seems to have some problems and your experience here in Stack Overflow may not be the best because of this. We want you to do well here and get what you want, but for that we need you to do your part. Here are some guidelines that will help you: Stack Overflow Survival Guide in English.
– Maniero