Having no capability to manipulate CSS using jquery

In one of my divs, the CSS is set to have display: none

.cookie_policy
{
color: white;
text-align: justify;
width: 50%;
margin: 2% 25%;
line-height: 20px;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-style: italic;
display:none;
}
<div class="cookie_policy">
    content goes here
</div>

When the dropdown selection changes, I am attempting to display the div only if the dropdown value is 'GB'

$("#ddlCountry").change(function () {
                if (this.value.indexOf('gb') != -1) {
                    //$('#cookie_policy').show();
                    $("#cookie_policy").css({ 'display': 'block' });
                }
                else {
                    $("#cookie_policy").css({ 'display': 'none' });
                }
                return false;
            });

I'm having trouble figuring out where I went wrong in the code as the div is not displaying. I checked the CSS values using Firebug and noticed that the property still remains as none. I tried using jQuery's show() function but the div still isn't visible.

The version of jQuery I'm using is jquery-1.4.1.min.js

Please provide guidance on where I may be making an error

jquerycss

Answer №1

Make sure to use the correct selector; opt for . rather than # as you are targeting a class:

$(".ddlCountry").change(function () {
    if (this.value.indexOf('gb') != -1) {
        //$('#cookie_policy').show();
        $(".cookie_policy").css({ 'display': 'block' });
    } else {
        $(".cookie_policy").css({ 'display': 'none' });
    }
    return false;
});

Answer №2

$("#cookie_policy") refers to an id selector in your CSS, but you should use a class instead like $(".cookie_policy")

For example:

var $cookiePolicy = $('.cookie_policy');

$('#ddlCountry').change(function (ev) {
    ev.preventDefault();
    $cookiePolicy[this.value === 'gb' ? 'show' : 'hide']();
});
  1. Use === and !== for type-awareness
  2. Avoid using return false unless you intend to stop propagation; use preventDefault instead
  3. Always cache the cookie_policy selector
  4. Consider using .show() and .hide() for clearer code
  5. Avoid unnecessary use of indexOf, especially if nothing follows 'gb'

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a jQuery modal by clicking on a cell within a table

As a novice in jquery, I am facing a challenge. I have a table with a column showing the total number of employees in a department. When a user clicks on this column, it should open up a jquery modal displaying a list of employees like EmpA, EmpB, and Em ...

javascriptjqueryasp.net-mvc

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...

htmlcssflexbox

Tips for breaking out of the traditional 12 column grid using Bootstrap 4 flexbox grid system

My excitement was palpable when I learned that Bootstrap 4 would be implementing flexbox for a grid system. I anticipated the fast and efficient element sizing capabilities that flexbox offers. However, it appears that Bootstrap 4 simply enhances the exist ...

twitter-bootstrapcssflexboxbootstrap-4

Ensure that an HTML table row remains fixed on the screen at all times

I'm looking to make a specific row in my HTML table always visible on the screen, either at the bottom if scrolled off or top. The row should scroll normally as part of the table when it's visible on the screen. How can I accomplish this using bo ...

javascripthtmlcssscroll

The jQuery method .on gathers and retains click events

I created a component that manages a view containing articles with games. In order to prevent memory overload and optimize performance, I implemented a solution where when a user clicks on an article (each having the class "flashgame"), they can choose to ...

javascriptjqueryangular

Developing a jsp page with interconnected drop down menus

I am looking to dynamically populate the options in a second drop-down based on the selection made in the first drop-down. For instance, if I have a first drop-down with options {India, South Africa, USA}, and I choose India, then the second drop-down shou ...

javascriptjqueryhtmlajax

AngularJS directive for automatically resizing Dygraph on page load

Could someone please assist me with resizing my graph inside tabs using Angular? When I initially load the graphs, they don't display unless I manually resize the window. How can I ensure that the graphs are loaded and fill the div on the first load? ...

javascriptjqueryangularjsdygraphs

Scrolling causes the header background color to change

Currently facing an issue with changing the background color of the header on scroll for my WordPress site. Using the scrollTop function to achieve this, but getting a function as the returned value instead. By logging the scroll position to the console us ...

jquerywordpressscrollscrolltop

Troubles with HTML, CSS, and jQuery Double-Level Menu

After creating a simplified version of an HTML, CSS, jQuery navigation menu, I noticed that the submenu items were being considered part of the containing list item. This caused them to not function as intended when clicked because they were being treated ...

jqueryhtmlcssmenunav

What is the reason for font names appearing yellow rather than blue in the "font-family" property?

Whenever I experiment with different font names, I notice that some fonts turn blue while others remain yellow. Can anyone clarify why this is happening? font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; ...

htmlcsssublimetext

What is the process for implementing an image as the background instead of a color for each column in a Google chart?

I'm currently working with Google Chart and I have set up a column chart. However, I am looking to display a background image instead of a background color in each column. Is this achievable with Google Chart? If so, how can I accomplish this? If anyo ...

javascriptcsschartsgoogle-visualization

Integrating Instagram photos onto a website

I came across this code on a forum, but unfortunately, it didn't work as expected for me. The photo didn't display, only the header appeared. Is there anyone who can assist me with this issue? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

jqueryinstagram

Ways to emphasize text in a h2 header without affecting other elements

One particular HTML block is causing me some trouble: <h2><span class="numbers">1.1 </span>header text</h2> It's important to note that I did not write this HTML code, so my options for changing it are limited. Howev ...

htmlcss

What steps can be taken to confirm that a comment posted on a specific post is genuine and related to that post?

Currently, I am immersed in the world of AJAX, PHP, and MySQL. Below is a snippet of my PHP code: if(isset($_GET['postTextComment'])){ // The text of the comment $htpc = htmlspecialchars($_GET['postTextComment']); // ID of ...

phpjqueryhtmlmysqlajax

Adjust the appearance of an element in a different parent when hovering over a specific element with a matching index

I have implemented a menu on my site in two different ways - one using text and the other using pictures. Users can click on both types of menus. Now, I am looking to create an interactive feature where hovering over a specific item in the text menu (such ...

javascripthtmljquerycsswordpress

Associating functions with events within objects

I am encountering a unique issue with jQuery and JavaScript in general. Currently, I am developing a JS file that allows me to create portlets for a client's website. I am utilizing SignalR to send updates to the users. The code snippet below is cau ...

javascriptjquerysignalr

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

Hiding a related field using a designated delimiter can be achieved with JavaScript

I am looking to create a function that hides the corresponding textarea field of a dropdown. This functionality will be utilized in multiple instances, hence the need for it to be within a function. <div id="formElement1" class="field"> <labe ...

javascriptjqueryhtml

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call

window.onload = function() { var dataPoints = []; // fetching the json data from api via AJAX call. var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("applicatio ...

javascriptjqueryhtmlcsshtml5-canvas

Animation does not occur after the stop() function is executed

My goal is to create a functionality where, upon moving back to the grey content box after leaving the button, the slideUp animation stops and the content slides down again. This works seamlessly with jQuery 1.x (edge), but when I switch to jQuery 1.10, th ...

javascriptjquery