We Keep Coding

Hiding content depending on variable value

I am making a price estimator.
How would correctly write a jQuery function that checks a variable and depending on that amount hides/shows a certain div element accordingly.
So if I had:
a HTML div with the ID 'Answer'
<div id="answer">Hide Me</div>
$("#answer")...
a variable (this variable would change)
var x = 30
Now I know the css to hide the div would be:
#answer{
visibilty:hidden;
}
What would be the correct way to hide the function checking these certain parameters? for example if x > 20 then hide etc
Now I know there will be many ways to do this and they may not require jQuery, please inform me if this is the case. Perhaps it just needs JS. I know there will be many ways to do it not just one so if you have a different way please comment as I am keen to learn.
Any help would be greatly appreciated.
Cheers
F

Note that you can also remove or add a class:
$('#answer').removeClass('hide');
$('#answer').addClass('hide');
But what you want to do is $('#answer').hide(); or $('#answer').show();

Execute this function providing the variable v:
var checkVar = function(v) {
var target = $('#answer');
if (parseInt(v) > 20) {
target.hide();
} else {
target.show();
}
}
For example, if the variable comes form a selection:
$('#selectId').on('change', function() {
checkVar($(this).val());
});

Remove the CSS. You can do it in jQuery
if(x>20){
$('#answer').hide();
}

You can use this one
$("#answer").hide();

#kapantzak's answer looks good. But keep your logic and style separated and if your not going to use the variable for the actual element twice, I wouldn't make it. So go:
var checkVar = function(var) {
var element = $('#answer');
if (parseInt(var) > 20) {
element.addClass('hidden');
}else{
element.removeClass('hidden');
}
}
And in your CSS go:
#answer.hidden{
display: none;
}
Also, depending on your preference, display: none; doesn't display anything of the object whereas visibility: hidden hides the object but the space the object was occupying will remain occupied.

HTML
<input id="changingValue">
...
<div id="answer">Hide Me</div>
CSS (not mandatory if you check values on loading)
#answer{ display:none;}
JS
var limit = 20;
$(function(){
$("#changingValue").change(function(){
if(parseInt($("#changingValue").val())<limit) { $("#answer").show(); }
else { $("#answer").hide(); }
});
});

Jquery add using append and remove using .remove

I'm trying to make two buttons that acts as remove and add function first I have this:
HTML
<video id="localVideo" style="background-color:black"></video>
<div id="remoteVideos"></div>
Buttons
<button id="BtnOn">On</button>
<button id="BtnOff">Off</button>
Script:
$(document).ready(function() {
//$("#BtnOn").click(function() {
// $('#A').append("<div id='localVideo'>");
// $('#A').append("<div id='remoteVideos'>");
//});
$("#BtnOff").click(function() {
$("#localVideo").remove();
$("#remoteVideos").remove();
});
});
What I'm trying to do is remove the 2 div's and have the ability to return them, with the condition that you can only add them if they are missing and remove them if they are present, therefore limiting them to 1 add and 1 remove. How can I accomplish this?Any help suggestion is appreciated

You could check if the #localVideo element exists. Also, if they are the only elements in the #A element, you can remove them by calling $('#A').empty();.
$(document).ready(function() {
$('#BtnOn').click(function() {
if ($('#localVideo').length == 0) {
$('#A').append('<video id="localVideo" style="background-color:black"></video><div id="remoteVideos"></div>');
}
});
$('#BtnOff').click(function() {
if ($('#localVideo').length > 0) {
$("#localVideo").remove();
$("#remoteVideos").remove();
}
});
});
You could also consider hiding and showing the video elements, rather than adding and removing them.

Instead of using .append() and .remove(), you can change the CSS display property to none or initial, depending on whether you want the thing to be shown or not.
This way, you can then add an if statement like so:
$("#BtnOff").click(function() {
if('#localvideo').css('display') == 'none'){
//do nothing
} else {
$('#localVideo').css('display','none');
$('#remoteVideos').css('display','none');
}
});

change div with Javascript

With pure Javascript I want to create a tab effect to toggle content in a div. Content is the name of the class I want to add or remove the second class active from
<script>
function changeClass(element) {
if (classList !=='active') {
element.classList.add('active');
}
else { element.classList.remove('active'); }
}
</script>
<ul>
<li onclick = "changeClass("content")">

The error is that you're not selecting any elements (wonder why nobody caught this), but trying to change the classlist of a string ("content".classList...). Make sure you select the proper element first:
function changeClass(element) {
element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one
if (!element.classList.contains('active')) { // had to fix this as variable classList wasn't defined
element.classList.add('active');
}
else {
element.classList.remove('active');
}
}
Also, as #Teemu suggested in comments, but refused to write it, feel free to use element.classList.toggle('active');.
So the whole code should be:
function changeClass(element) {
element = document.getElementsByClassName(element)[0]; // assuming here we're selecting the first one
element.classList.toggle('active');
}

If you want to simply toggle between two classes, you can do something like this:
function changeClass(element) {
element.classList.toggle('Content');
}
Though in this case you've to pass a reference to the element rather than it's className.

How to toggle dynamically created div 's on the basis of class and name attributes, modified?

Following is my reference Code:
$('#main_div').on('click','.gclass', function(){
$(this).css('color','#0088cc');
if($(this).next().hasClass('gclass2') || $(this).next().next().hasClass('gclass3')){
console.log('1st child or 2nd child');
$(this).parent().find('.gclass2,.gclass3').slideToggle();
}
return false;
});
I have created two divs dynamically who are having same class '.gclass'.
When I click on '.gclass' then divs with '.gclass2 and .gclass3' are toggle.
When I click on one div of class .gclass then other div having .gclass is also getting toggled, which I dont want to.
Any hint please.
For CSS I tried :
$(".gclass").not(this).css("color", "#6e6e6e");
But for slideToggle() what can be done?

For slideToggle() you can write custom filter that will filter out your element:
var that = this;
$(this).parent().find('.gclass2,.gclass3').filter(function() {
return $(this).prev()[0] === that || $(this).prev().prev()[0] === that
}).slideToggle();
Working example see here: http://jsbin.com/IjaboNE/1/edit

Basic jQuery slideUp/slideDown help

I was wondering if there was a function that I can add to this, that would show the data again, as in make it slide back down or something after a given set of time so you can go back and re-enter your data.
It currently just slides up after submit, and then shows the text.
$("#help").slideUp(function() {
$("#help").before('<div class="failMessage">SOME FAIL TEXT HERE</div>');
setTimeout(ShowControlsHideFailMessage,5000);
});
function ShowControlsHideFailMessage()
{
$("#help").slideDown();
$('.failMessage').addClass('hidden');
}

The code sample below will use the setTimeout function to call $("#help").slideDown() after 5 seconds. Also, If you want to hide the "FAIL TEXT", I'd suggest using a CSS class for that message like this:
$("#help").slideUp(function() {
$("#help").before('<div class="failMessage">SOME FAIL TEXT HERE</div>');
setTimeout(ShowControlsHideFailMessage, 5000);
});
function ShowControlsHideFailMessage()
{
$("#help").slideDown();
$('.failMessage').addClass('hidden');
}
You can use the class failMessage for red fonts or anything special to that message and then create a hidden class that sets the display to none.

Here's a better way:
var failMessage = $('<div class="failMessage" />');
failMessage.text('SOME FAIL TEXT HERE');
//Create the failMessage beforehand
$("#help")
.slideUp(function() {
$(this).before(failMessage);
})
.delay(5000)
.slideDown(function () {
failMessage.hide();
}​);​