Concealing information based on the value of a variable

Question

Concealing information based on the value of a variable

Creating a dynamic price estimator.

I need help writing a jQuery function that can hide or show a specific div element based on the value of a variable.

For example, let's say I have an HTML div with the ID 'Answer':

<div id="answer">Hide Me</div>

$("#answer")...

And a variable called x:

var x = 30

To hide the div using CSS:

#answer{
visibility:hidden;
}

How can I create a function that checks if x is greater than 20 and hides the div accordingly?

I understand there are multiple ways to achieve this and it may not necessarily require jQuery. If there is a different approach using JavaScript alone, please share as I am eager to learn.

Any guidance would be appreciated.

Thank you!

javascript jquery css hide show-hide

Answer 1

Answer №1

Keep in mind that you have the option to both remove or include a class:

$('#response').removeClass('hidden');
$('#response').addClass('hidden');

However, the most efficient way is to use $('#response').hide(); or $('#response').show();

Answer 2

Keep in mind that you have the option to both remove or include a class:

$('#response').removeClass('hidden');
$('#response').addClass('hidden');

However, the most efficient way is to use $('#response').hide(); or $('#response').show();

Answer 3

Answer №2

Run this function with the variable v:

var checkVariable = function(v) {
   var targetElement = $('#answer');
   if (parseInt(v) > 20) {
      targetElement.hide();
   } else {
      targetElement.show();
   }
}

For instance, if the variable is obtained from a selection:

$('#selectId').on('change', function() {
   checkVariable($(this).val());
});

Answer 4

Run this function with the variable v:

var checkVariable = function(v) {
   var targetElement = $('#answer');
   if (parseInt(v) > 20) {
      targetElement.hide();
   } else {
      targetElement.show();
   }
}

For instance, if the variable is obtained from a selection:

$('#selectId').on('change', function() {
   checkVariable($(this).val());
});

Answer 5

Answer №3

Eliminate the styling with ease by utilizing jQuery

if(y < 10){
 $('#result').remove();
}

Answer 6

Eliminate the styling with ease by utilizing jQuery

if(y < 10){
 $('#result').remove();
}

Answer 7

Answer №4

Feel free to utilize this option

   $("#solution").hide();

Answer 8

Feel free to utilize this option

   $("#solution").hide();

Answer 9

Answer №5

@kapantzak's response seems solid. It's important to separate logic from style, so if you're not planning on using a variable for the element more than once, it may be unnecessary. Here's a revised version:

var checkElement = function(value) {
   var target = $('#answer');
   if (parseInt(value) > 20) {
      target.addClass('hidden');
   } else {
      target.removeClass('hidden');
   }
}

In your CSS, add this rule:

#answer.hidden{
 display: none;
}

Consider that display: none; hides the object completely while visibility: hidden keeps the space occupied by the hidden object.

Answer 10

@kapantzak's response seems solid. It's important to separate logic from style, so if you're not planning on using a variable for the element more than once, it may be unnecessary. Here's a revised version:

var checkElement = function(value) {
   var target = $('#answer');
   if (parseInt(value) > 20) {
      target.addClass('hidden');
   } else {
      target.removeClass('hidden');
   }
}

In your CSS, add this rule:

#answer.hidden{
 display: none;
}

Consider that display: none; hides the object completely while visibility: hidden keeps the space occupied by the hidden object.

Answer 11

Answer №6

Learning HTML

<input id="changingValue">
...
<div id="answer">Don't Show Me</div>

CSS (optional if you validate values on page load)

#answer{ display:none;}

JavaScript

var range = 30;
$(function(){
    $("#changingValue").change(function(){
         if(parseInt($("#changingValue").val())<range) { $("#answer").show(); }
         else { $("#answer").hide(); }
    });
});

Answer 12

Learning HTML

<input id="changingValue">
...
<div id="answer">Don't Show Me</div>

CSS (optional if you validate values on page load)

#answer{ display:none;}

JavaScript

var range = 30;
$(function(){
    $("#changingValue").change(function(){
         if(parseInt($("#changingValue").val())<range) { $("#answer").show(); }
         else { $("#answer").hide(); }
    });
});

Concealing information based on the value of a variable

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Footer not being pushed down by content in mobile view on page

Reduce the size of a webpage by 10%

Having Trouble with the Spacing Between Navbar and Page Content in Bootstrap?

Unable to interpret Python/Django-generated JSON object on client side

What is the best way to convert the information from a <SelectInput /> component or similar components into another language?

HTML View of JSON Object Hierarchy

Tips for connecting elements at the same index

Can anyone tell me what I might be doing incorrectly when comparing these two timestamps?

Convert JavaScript objects to strings with JSON strings already included as values

Generating a fresh object from an existing object by incorporating updated values using Angular and Ionic version 3

Ways to identify when a React child element is overflowing

The Json object's size increases exponentially with each subsequent return

Eliminating rows from a DataTable through an Ajax request

Is it possible to retrieve the original array after removing filters in Angular?

Text in various styles is layered on top of an image, ensuring that text in one style does not overlap text in another style

What is the best way to retrieve widget options when inside an event?

Massive HTML Table Containing Rows upon Rows

Error: The function $.get is not recognized when using jQuery with babel-node

Employing identification as a variable

Refresh element once AJAX call is completed successfully