I am trying to hide a div through css.
The div hide is working inside the form, how can this be done outside the form, or even outside the div row?
HTML
<div class="row">
<form>
<input type="radio" name="radio" value="show" checked/>Show <br>
<input type="radio" name="radio" value="hide"/>Hide
<div class="hideDiv">
<p>Can you see me</p>
</div>
</form>
</div>
CSS
input[type=radio][value="hide"]:checked ~ .hideDiv {
display: none;
}
Preferably only css but javascript is also a option.
Use less CSS specificity.
.hideDiv {
display: none;
}
maybe something similar to this code will help?
<input type="radio" name="radio" onclick="hideFunc();" value="show" checked/>Show <br>
<input type="radio" name="radio" onclick="hideFunc();" value="hide"/>Hide
<script>
hideFunc = function() {
if (document.getElementsByClassName('hideDiv')[0].style.display == "none")
document.getElementsByClassName('hideDiv')[0].style.display = "block";
else
document.getElementsByClassName('hideDiv')[0].style.display = "none";
}
</script>
You could try this:
favorite
I am trying to hide a div through css. The div hide is working inside the form, how can this be done outside the form, or even outside the div row?
HTML
<div class="row">
<form>
<input type="radio" name="radio" value="show" onclick="hideDiv();" checked/>Show <br>
<input type="radio" name="radio" onclick="hideDiv();" value="hide"/>Hide
<div class="hideDiv">
<p>Can you see me</p>
</div>
</form>
</div>
JS
function hideDiv() {
var aux = $('input[name="radio"]:checked').val();
if (aux == 'show'){
$('.hideDiv').css("display","block");
}else{
$('.hideDiv').css("display","none");
}
}
you can do it easily using jquery
$('.chkToogle').click(function(){
$('.hideDiv').fadeToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form>
<input type="checkbox" class="chkToogle" checked/>Show/Hide
</form>
</div>
<div class="hideDiv">
<p>Can you see me</p>
</div>
Related
If you have one div with two radio buttons with no ids and each one disables content and displays new content if selected. Should be simple but its not working properly. When the radio button is changed, toggle off that content and fade in the new content and vice versa.
What is wrong with this code? Is it not this simple?
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" />
Projects <input name="change" type="radio" value="2" />
</div>
$(":radio").change( function(e) {
$(".radios__home").toggle().fadeIn(400);
$(".radios__projects").toggle().fadeIn(400);});
Your issue is that .fadeIn always makes the element visible, regardless of what you do with .toggle. So you need to check the value of the checked radio and use that to fade in/hide the appropriate element. Something like this (but hopefully a bit prettier):
$(":radio").change(function(e) {
if ($(this).val() == 1) {
$(".radios__home").fadeIn(400);
$(".radios__projects").hide();
} else {
$(".radios__home").hide();
$(".radios__projects").fadeIn(400);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radios">
<div class="change__radio">
Home: <input name="change" type="radio" value="1" checked="true" /> Projects <input name="change" type="radio" value="2" />All
</div>
<div class="radios__home" style="display:block">Home Radio</div>
<div class="radios__projects" style="display:none">Projects Radio</div>
</div>
How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.
If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Why is that when I put the checkboxes inside a label, It seems to stop working
This was my html code.
<label> <input type="radio" name="form-showhide" checked="checked" required value="call">Call </label>
<label> <input type="radio" name="form-showhide" value="email">Email </label>
and this is my jQuery code.
$("#lcall").live('click', function() {
$("#additional-info").show();
});
$("#lnk2").live('click', function() {
$("#lmail").hide();
});
This Is what I do and it works:
$(document).ready(function() {
$('.toggler').click(function() {
$('.toggle').toggle('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="toggler">Click Me</p> <p class="toggle">I will hide</p>
I try to make something like that work, implementing it in my CMS:
Fixed CMS part:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId"> Question </div>
<span id="spanId">
<input value="yes"></input>
<input value="no"></input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">
some text
</div>
own JS part someting like:
function EnableTextbox(radioListId,spanId)
{
if(document.getElementById(radioListId).inputValue == "yes")
document.getElementById(textBoxId).visibility = visible;
else
document.getElementById(textBoxId).visibility = hidden;
}
But I am not quite sure how to put it correctly - my understanding of js is not really high enough.
Any helping comments are highly appreciated!
try this
HTML
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
<input type="radio" value="yes" name="showhide"> Show</input>
<input type="radio" value="no" name="showhide"> Hide</input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>
Script
$(document).ready(function () {
$("#txtBoxId").hide();
$("input[name='showhide']").on("click", function () {
var option = $(this).attr('value');
if (option == "yes") {
$("#txtBoxId").show();
} else {
$("#txtBoxId").hide();
}
});
});
Fiddle Sample
There are a few changes you need to make:
the inputs need to have a type="radio" to indicate that those are radio buttons.
the inputs need to have a common name="whatever" to indicate that both belong to same group and cannot be checked simultaneously.
the inputs need to have a text between the opening/closing tags, this text appears next to the radio button.
you need to call the javascript function when you click/change the buttons, and inside you check which radio was selected.
you pass the radio button reference into the javascript function by writing this as the function variable.
inside the function you retrieve the radio button reference, you can name the variable whatever you want.
you are using visible and hidden as variables, but those are not defined. it supposed to be either a string, or a boolean value. i prefer to use css for that purpose.
here is an Example Fiddle
HTML:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId">Question</div> <span id="spanId">
<input type="radio" value="yes" onclick="EnableTextbox(this);" name="Answer">Yes</input>
<input type="radio" value="no" onclick="EnableTextbox(this);" name="Answer">No</input>
</span>
</div>
<div class="TxtBox" id="txtBoxId">some text</div>
JS:
function EnableTextbox(radioList) {
if (radioList.value == "yes") document.getElementById("txtBoxId").style.visibility = "visible";
else document.getElementById("txtBoxId").style.visibility = "hidden";
}
Since onclick="" is outdated you should use the element.addEventListener();!
Here is an Example in Fiddle!
HTML:
<div class="RadioList" id="radioListId">
<div class="TxtLbl" id="textLblId"> Question </div>
<span id="spanId">
<label><input type="radio" name="answer" id="yes" value="yes" />Yes</label>
<label><input type="radio" name="answer" id="no" value="no"/>No</label>
</span>
</div>
<div class="TxtBox" id="txtBoxId">
some text
</div>
JS:
var yes = document.getElementById('yes');
var no_ = document.getElementById('no');
if (yes.addEventListener) {
yes.addEventListener ("RadioStateChange", OnChange, false);
no_.addEventListener ("RadioStateChange", OnChange, false);
}
function OnChange(){
if (yes.checked) {
document.getElementById('txtBoxId').style.display = 'inline';
}
else {
document.getElementById('txtBoxId').style.display = 'none';
}
}
Greetings from Vienna
In jQuery
<span id="spanId">
<input type="radio" name="radiobutton" value="yes" />
<input type="radio" name="radiobutton" value="no" />
</span>
$('#spanId input:radio[name="radiobutton"]').change(function(){
if($(this).val() === 'yes'){
$('#txtBoxId').show();
} else {
$('#txtBoxId').hide();
}
});
Explanation
$('#txtBoxId').show() = display:block;
$('#txtBoxId').hide() = display:none;
If you want visibility instead.
$('#txtBoxId').css('visibility','visible');
$('#txtBoxId').css('visibility','hidden');
Let me know if you have any question.
I am very new to Javascript, and can't seem to find the information I'm looking for.
I'm trying to make another div slide down when the "Yes" radio button is clicked, and slide back up when "No" is clicked. However, nothing is happening when I click either one. This is my current code:
HTML:
<div class="field">
<label for="">Apprentice</label>
<div class="topRadio">
<input name="apprentice" group="apprentice" type="radio" value="Yes" onclick="dropbcitdown()">
<label for="">Yes</label>
<input name="apprentice" group="apprentice" type="radio" value="No" onclick="pickbcitup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="field slidingdiv" id="doyouattend">
<label for="">Do you attend BCIT?</label>
<div class="topRadio">
<input name="bcit" group="bcit" type="radio" value="Yes" onclick="droptransportationdown()">
<label for="">Yes</label>
<input name="bcit" group="bcit" type="radio" value="No" onclick="picktransportationup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class ="clear"></div>
</div>
<div class="field slidingdiv" id="doyouneed">
<label for="">Do you need ground transportation to city hall?</label>
<div class="topRadio">
<input name="transportation" group="transportation" type="radio" value="Yes">
<label for="">Yes</label>
<input name="transportation" group="transportation" type="radio" value="No">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Javascript
<script>
function bcitDown() {
$("#doyouattend").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}
function bcitUp() {
$("#doyouattend").slideUp("slow" function() {
$(this).css({
display: "none";
})
})
}
function transportationDown() {
$("#doyouneed").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}
function transportationUp() {
$("#doyouneed").slideUp("slow" function() {
$(this).css({
display: "none";
})
})
}
</script>
I have also tried doing it with the values of the radiobuttons, but I can't submit the for before they drop down. Unrelated, but the '' making a line break if anyone is wondering why that's happening. I have tried running this without that, and haven't had a different outcome.
If I am making a glaring syntax error, or this ends up being some obvious solution that I totally missed, I'm sorry. I just feel that I've tried everything.
NOTE: I have included JQuery.
First add Jquery library
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
After try this:
<script>
$(document).ready(function(){
$('input[name=apprentice]').click(function(){
if ($(this).val() == 'yes')
{
$("#yourdiv").slideDown('slow');
}
else
{
$("#yourdiv").slideUp('slow');
}
});
}):
</script>
You can apply jquery functions only to jquery objects. By selecting with getElementById() you get the DOM object but no the Jquery Object. That is why you use $(this) inside the function to change the css.
I would recommend using:
function dropbcitdown() {
$("#doyouattend").slideDown("slow" function() {
$(this).css({
display: "inline";
})
})
}