Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked:

    $('#cartHolder').attr('style','display: none !important');
    $.cookie("cartDisplay", 'none !important');

In my header section, I have the following:

   if ($.cookie("cartDisplay")){
       $('#cartHolder').attr('style', $.cookie("cartDisplay"));
   }

The issue I'm facing is that after each refresh, the display property goes back to its default value. Despite successfully storing the required value using jquery cookie (as seen in the console window), it does not update the DOM upon refresh.

If anyone could provide assistance, I would greatly appreciate it.

Thank you

jquerycssdomcookies

Answer №1

It is advisable not to use the attr('style') method as it can cause all your styles to be overridden. Instead, consider using .css as an alternative and try to avoid using !important.

$('#cartHolder').css('display','none');
$.cookie("cartDisplay", 'none');

You can also try implementing this in your header:

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').css('display', $.cookie("cartDisplay"));
       }
});

Another approach is to use .toggle:

$('#cartHolder').hide();
$.cookie("cartDisplay", 'false');

Include this in your header as well:

$(document).ready(function(){
    if ($.cookie("cartDisplay")){
           $('#cartHolder').toggle($.cookie("cartDisplay"));
       }
});

Don't forget to enclose the code within $(document).ready(function(){ to ensure that the DOM elements have finished loading.

Answer №2

The information retrieved from your cookie will appear as follows: 

none !important

When applying this to your element, use the following format: 

 <div style="none !important"></div>

To ensure completeness in your cookie data, update it to: 

display:none !important

UPDATE
For better implementation, consider using this syntax:

 $('#cartHolder').css('display', $.cookie("cartDisplay"))

Your cookie code does not require any modifications (it should function correctly).

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

The width of the Div element is not following the specified dimensions, and it also has an unspecified margin

Check out my code snippet at: http://jsfiddle.net/8z4aw/ I'm trying to create a table-like layout using div elements, but for some reason the browser is not respecting the specified widths and seems to be adding an unwanted right margin. Where is thi ...

htmlcss

What is the process for deselecting text from a text field?

After performing a search and displaying the results on my search form, I've noticed that the text query in the textfield is being marked as selected text even though I don't want it to be. How can I prevent this? Fiddle 1) What is the best app ...

javascriptcsshtml

Creating a dialog box in jQuery triggered by a user clicking a link

Just starting out with JQuery and curious about creating a dialog box that appears when a user clicks on a link. For example, if I click "send," I want a dialog box to pop up saying "your information has been sent!" Any assistance is greatly appreciated! ...

jquery

Sort various divs using a list

I have multiple divs containing different content. On the left side, there is a list of various categories. When a category is clicked, I want to display the corresponding div for that category. Initially, I want the main category to be loaded, with no opt ...

javascripthtmljqueryfilter

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

javascriptjqueryhtmljson

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap

Get multiple increment buttons functioning

I've managed to create an increment counter that updates the value in a .txt file on my server every time I click a button by +1. It's working flawlessly and here's how it looks like: <!DOCTYPE html> <html> <head> <meta ...

javascriptphpjqueryajax

Difficulty Clicking Links with CSS 3D Transformation

I'm currently working on implementing a CSS 3D transform effect on my website. However, I am encountering some issues with clicking the links once the card has been flipped over. Question Why is this happening? How can I resolve this so that I can ...

csscss-transforms

Every click will nudge the square to the right

I have a square that should move 100px to the right when clicked, but on the next click it moves back to the left. How can I resolve this issue? On JSFiddle, the code works fine. However, when I try to run it in Chrome, I get an error message: Cannot re ...

javascripthtmlcss

Toggle the Bootstrap navbar class based on the current scroll position

I'm currently working on the development of a website that includes a feature where a static navbar transforms into a fixed navbar after scrolling down 500px. The transition from "navbar-static-top" to "navbar-fixed-top" is functioning properly. Howev ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...

javascriptjqueryhtmlcssangularjs

Searching for the right style before utilizing jQuery to add an element in just one go

My goal is to customize a popup generated by a plugin, but I have limited access to the HTML file for direct editing. So, I am experimenting with using jQuery to achieve this. Essentially, when the styling of the PopUp changes to become visible, I want to ...

jquery

The placeholder text in the matInput field is not being displayed

As a newcomer to Angular, I am facing a challenge that has left me unable to find a solution. Below is the code snippet in question: <mat-form-field> <input matInput placeholder="ZIP" style="color:red;"> </mat-form-field& ...

javascriptangularcssangular-material

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

htmlcsslayoutcss-float

Prevent form submission when text fields are empty or dropdown selections are not made

I have a piece of code that is currently working with just one textbox input called 'departname'. However, I now need all input fields to be required and the dropdown menu for 'ACFTREG' (which is populated from a Sharepoint list) should ...

javascripthtmljquerysharepoint-online

Fixed top bar and navigation menu, with a body that can be scrolled

My current goal is to achieve the following layout: <div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"& ...

csslayoutheadermenu

Dim the entire website

I am attempting to apply a grey overlay across my entire site when a file is dragged in for upload. The drag event and activation of the grey overlay are functioning correctly, but there are specific areas where it does not work as intended. There seems t ...

htmlcss

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

htmlcss

Including an image side by side with clickable text within a list

Check out my progress here: http://jsfiddle.net/dDK6z/ I've experimented with using display:inline(-block), as well as adjusting margins, padding, and more, but I can't seem to get the image to move down or the text to move up. Does anyone have ...

htmlcss

The issue with clip-path not functioning correctly in Safari persists

My list of clipped elements is causing an issue when using the CSS3 clip-path method to clip an image into an SVG path. The clipping works perfectly, but in Safari (V 12.1.4), the position of the clipped element changes with each box. The element ...

htmlcsssvgsafariclip-path