how to really hide HTML div element using css or js - javascript

I want to hide div element located in bootstraps radio or checkbox container,
this is how it look using jquery:
I can't post image, so prev is here: http://prntscr.com/6wrk2m
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" onClick="$('#qq').toggleClass('hide')" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" onClick="$('#qq').toggleClass('hide')" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
display:none doesn't work too ...

You have multiple ways. You can do this by
.hide {
display: none;
}
or even by this class:
.hide {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
UPDATE:
Check this example: JSFiddle

This would work, note the addition of classes and the use of an event handler instead of the inline javascript:
$(function() {
$('.hideOnClick').click(function(){
$('#qq').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" class="hideOnClick" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" class="hideOnClick" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>

This is how i just did using jquery:
$('#qq').hide();
Hope it helps...

in CSS you can hide an element simply by changing it's css display property to none. simply use display:none and there you go :)
as for jquery solution you can use hide() method. here is a full example :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
update:
i personally prefer just overriding css using a java code.wrap this code in a function and add onclick to your button or your checkbox with the refrece of function you just made
document.getElementById("qq").setAttribute("style", "display:none");

Related

Hide a div based on select radio button in a form

I have a form where you have to choose between two input type="radio", one says yes and the other one says no.
I want to make a div that is visible in the form disappear when you select the no option. I tried by copying some JS from other posts I read on the internet, but nothing worked for me.
Can someone tell me the code I should use? It can be JS, PHP or CSS.
Here is my code:
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="yes" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="no" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You need to add event listeners to your inputs, as well you should change the name of both radio buttons to be the same thing. I used inputs below. I then toggle the display style on the #hello element depending on which selection was clicked.
const hello = document.getElementById('hello');
document.getElementById('yes')
.addEventListener('click', function() {
hello.style.display = null;
});
document.getElementById('no')
.addEventListener('click', function() {
hello.style.display = 'none';
});
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>
<div id="hello">
You clicked on NO, so this div disappears.
</div>
You can achieve this with pure CSS. Don't know if my solution is suitable because I have no idea how the rest of your page is structured.
.form-radio {
position: relative;
padding-bottom: 2rem;
}
input#no ~ #floatingDescription {
position: absolute;
bottom: 0px;
left: 0px;
display: block;
}
input#no:checked ~ #floatingDescription {
display: none;
}
<!DOCTYPE html>
<hml>
<body>
<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="answer" id="yes" checked>
<label for="hsi">YES</label>
</div>
<div class="form-radio-item">
<input type="radio" name="answer" id="no">
<label for="hno">NO</label>
<div id="floatingDescription">You clicked on NO, so this div disappears.</div>
</div>
</div>
</body>
</html>

Change the value of a variable when an image is selected

I want to select one image among four of them. And then the variable that i have should be increased. If i select other image then the variable should change and take the value of that image. Here is the code i have so far that does not work
HTML
<div class="checkbox">
<input type="checkbox" name="paroxi" value="10"><br>
</div>
CSS
.checkbox{
width: 23px;
height: 21px;
background: black;
visibility:hidden;
}
.checked{
background: red;
visibility:block;
}
JAVASCRIPT
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
If you wanna keep the checkboxes, guess to post price value later, than you can do it this way:
$('.image-selection input').on('change', function(e) {
$('.selected-value').text( $('.image-selection input:checked').val() );
}).trigger('change');
.image-selection input {
display: none;
}
.image-selection input:checked + img {
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-selection">
<label for="checkbox-1">
<input id="checkbox-1" name="image-input" type="radio" value="10" checked="checked" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-2">
<input id="checkbox-2" name="image-input" type="radio" value="20" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-3">
<input id="checkbox-3" name="image-input" type="radio" value="30" />
<img src="http://placehold.it/150x150" />
</label>
<label for="checkbox-4">
<input id="checkbox-4" name="image-input" type="radio" value="40" />
<img src="http://placehold.it/150x150" />
</label>
</div>
<p>Price: <span class="selected-value"></span></p>
Also on JSFiddle.

Checkbox: uncheck when on another is checked

I'm trying to use this function to uncheck a checkbox when another one is checked:
<script>
$('input.unchecked').on('change', function() {
$('input.unchecked').not(this).prop('checked', false);
});
</script>
<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked);
});
$("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked);
});
$("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked);
});
$("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>
But does not works, because when you check another checkbox the table content disappears.
This is the HTML code:
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
And here where I want to use it:
http://develop.nowcommu.myhostpoint.ch/table-test.html
Any ideas?
EDIT:
Maybe this is the problem?
<script>
$("#checkboxID").change(function(){
$("#tableID tr.rowEG").toggle(!this.checked);
});
$("#checkbox1OG").change(function(){
$("#tableID tr.row1OG").toggle(!this.checked);
});
$("#checkbox2OG").change(function(){
$("#tableID tr.row2OG").toggle(!this.checked);
});
$("#checkbox3OG").change(function(){
$("#tableID tr.row3OG").toggle(!this.checked);
});
</script>
Here is a simple solution without the need of script.
input{
display:none;
}
label{
width:25px;
height:25px;
font-size:16px;
cursor:pointer;
position:relative;
padding-left: 30px;
}
label ~ label {
margin-left: 40px;
}
label:before,
label:after{
top: 0;
left: 0;
position:absolute;
height:15px;
width:15px;
content:' ';
border-radius: 2px;
border: 1px #3a3a3a solid;
font-weight: bold;
}
input:checked + label:after{
top: -2px;
left: 2px;
content: '\2713';
border: none;
}
<form class="filter">
<input type="radio" name="radio" id="radio"><label for="radio"> EG </label>
<input type="radio" name="radio" id="radio1"><label for="radio1"> 1.OG </label>
<input type="radio" name="radio" id="radio2"><label for="radio2"> 2.OG </label>
<input type="radio" name="radio" id="radio3"><label for="radio3"> 3.OG </label>
</form>
See the fiddle:
https://jsfiddle.net/61eywpzg/
HTML
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
jQuery
$('input.unchecked').on('change', function() {
$('input.unchecked').not(this).prop('checked', false);
});
Try the below snippet:
$('.unchecked').click(function(){
$(this).siblings().prop("checked",false)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="filter">
<input type="checkbox" id="checkboxID" class="unchecked"> EG
<input type="checkbox" id="checkbox1OG" class="unchecked"> 1.OG
<input type="checkbox" id="checkbox2OG" class="unchecked"> 2.OG
<input type="checkbox" id="checkbox3OG" class="unchecked"> 3.OG
</form>
You can use radio buttons instead of checkboxes.
To do this, change the type of your input to radio, example:
<input type="radio" id="checkboxID" class="unchecked">

Create a new <td> if it exceeds a certain width?

In my MVC site, I have a these lines of code:
<h2>#Model.Question</h2>
#using (Html.BeginForm("Index", "Result", FormMethod.Post))
{
<table cellspacing="10">
<tr>
#foreach (string answer in Model.Answers)
{
<td><input type="radio" name="answer" value="#answer" /><span>#answer</span></td>
}
</tr>
</table>
<div id="footer">
<input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
<input class="btn btn-success" type="submit" />
</div>
}
(Ignore the currently poorly implement first button in the footer)
The <input type="radio... returns the same amount of radio buttons as answers from a database. My problem is that for one question, there are a lot of answers and it starts making the page scroll sideways, as shown in the image below
What I want to happen is for the radio buttons to start on a new line, possibly in another <td>, when it starts to go too far sideways. Possibly done when it hits the border of a surrounding div I could create? Or when it exceeds a certain pixel width? I am not quite sure how to approach this at all. Thanks in advance!
Instead of using tables for your job, it is better to use DIV with fixed width (or percentage width) and floating them left so they stick together in one line. When there will be too much elements for one line, they will automatically jump to a new line. This will also work if you will change width of your browser.
CSS part:
.elements {
border: 1px solid red;
}
.elements:before,
.elements:after{
display: table;
content: " ";
}
.elements:after {
clear: both;
}
.element {
float: left;
min-height: 1px;
border: 1px solid blue;
margin: 2px;
}
HTML Part:
<div class="elements">
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
<div class="element">
<input type="radio" name="radio" value="" /> Radio
</div>
</div>
https://jsfiddle.net/4xvdcw9b/2/
If using table is not necessary you can try this approach:
<ul>
#foreach (string answer in Model.Answers)
{
<li><input type="radio" name="answer" value="#answer" /><span>#answer</span></li>
}
</ul>
with this styles:
ul
{
max-width:300px;
list-style-type: none;
}
li
{
display: inline;
}

multiple buttons with same form at a time

I have multiple buttons that has a same class. When clicking the button, there's a form popups. how can I make it dynamic? so whenever I click a button not all form will popup.
See sample code below.
$(".plans-de-mesure-form-button").click(function(){
$(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
up to your structure you can use $(this) and .next()
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
to close the form
$('.Close_Button_Class').on('click',function(){
$(this).closest(".evaluation-gratuite-form").fadeOut("slow");
});
Try this way $(this).next(".evaluation-gratuite-form")
$(".plans-de-mesure-form-button").click(function(){
$(this).next(".evaluation-gratuite-form").fadeIn("slow");
});
a.plans-de-mesure-form-button {
cursor:pointer;
}
.evaluation-gratuite-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
<div class="listing">
<a class="plans-de-mesure-form-button">Evaluation</a>
<div class="evaluation-gratuite-form">
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
</div>
</div>
More Elegant solution will be that which is DOM independent because there can be more elements who are siblings.
Use parents instead of parent function if a tag is present at nested levels.
So use below code:
$(".plans-de-mesure-form-button").click(function(){
$(this).parent('.listing').find(".evaluation-gratuite-form").fadeIn("slow");
});

Categories

Resources