Use Javascript to set cookies and remember the show state when clicked

Can you offer some advice? I am looking to add cookies to my simple JavaScript code. Currently, the div is displayed when clicking on a link, but it hides again when the page reloads. I would like to implement cookies to remember the show state for 7 days.

Javascript

function showDiv() {
document.getElementById('auth_block').style.display = "block";
}

HTML

<a href="#" onclick="showDiv()">
      <img src="/images/cont_btn.png">
    </a>

<div style="display:none;" id="auth_block">Some information</div>
javascriptjqueryhtmlcsscookies

Answer №1

Using jQuery, you have the ability to utilize $.cookie():

$('a').click(function() {
    if($.cookie('display') != null) {
        $('#auth_block').show();
    } else {
        $.cookie('display', $('#auth_block').css('display'), { expires: 7 });
        $('#auth_block').show();
    }
});

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

Updating the date with setState in Material UI components

I have a question about integrating the material ui datepicker into my project. I want the current date in the state to update whenever the user switches from one date to another. You can find the materialUi datepicker I am using at this link. I tried im ...

javascriptreactjsmaterial-ui

Unique Google Maps API V3 PEGMAN Customization

Can custom zoom controls and Pegman controls be styled with the same design? To add custom zoom controls, follow the instructions provided in this question's answer: <!DOCTYPE html> <html> <head> <meta name="viewport" cont ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

What are the drawbacks of incorporating side effects into JavaScript constructors?

In my coding, I often utilize a design pattern similar to the concept of custom objects. However, JSLint disapproves of code constructs like this: function MyClass() { this.init(); } new MyClass(data); The reason being that the newly created object is d ...

javascriptcoding-styleconstructor

JavaScript on the client side or the server side?

I am faced with a challenge on my report page where I need to filter customers based on specific criteria and highlight certain details if their registration date falls after a specified date, such as 1st January 2011. With around 800 records to showcase, ...

javascriptclient-sideserver-side

Is SPE.Group.tick experiencing issues with a faulty delta argument in Three.js / ShaderParticleEngine?

I recently started using the ShaderParticleEngine library in Three.js to set up particle emitters. After browsing through various code snippets online, I managed to get an emitter up and running. Initially, I thought it wasn't working as I could only ...

javascriptthree.jsparticle-system

Leverage express for proxying websocket connections

Currently, I am facing a situation where my data provider gives me stock prices through a TCP connection but only allows a static IP to access their service. Since I need to format the data before sending it to my front-end, I plan to utilize my express ba ...

javascriptnode.jsexpresswebsocket

Reset button for jQuery form to clear all inputted values

My form has a reset button that is supposed to clear all entered values, but it doesn't seem to be working properly. After checking the Firefox console tab for errors, I noticed an 'illegal character' error at the end of my jQuery script. C ...

jqueryhtml

Is it possible to determine if a window was opened using window.showModalDialog()?

Is there a way to determine if a window was triggered by window.showModalDialog()? I've noticed that when a new window is opened using window.open(), window.opener correctly returns the parent window. However, when using window.showModalDialog(), wind ...

javascriptjquerywindow.openershowmodaldialog

Issue with WordPress navigation menu bug

On my website, I have implemented WP nav menu and it seems to be functioning correctly. However, I am facing an issue with the sub link under the home link. The screenshot shows the problem clearly. In the provided image, the "support our work" sub link a ...

csswordpresshtml

The status of the 'slider' may be 'undefined'

I'm really struggling to figure out how to resolve this issue, even though I suspect it's a simple fix that's eluding me... Here is the part of my code in TypeScript that's causing the error: const slideLeft = () => { cons ...

htmlreactjstypescript

Showing content in a single line causes it to drop down to the next

Check out my code snippet here: http://jsfiddle.net/spadez/aeR7y/23/ I'm curious about how I can make my header list align on the same line as the header, without dropping down. Here's the CSS code I have for the list: #header li { display: ...

htmlcss

Tips for configuring Visual Studio Code to utilize path mappings for handling automatic imports

In order to streamline my project and avoid messy paths, I am implementing absolute paths that will allow for consistent imports regardless of the file's location in the project tree. For this purpose, I made adjustments to the tsconfig.json: "paths ...

javascriptangulartypescriptvisual-studio-code

What is the method for duplicating the HTML code of multiple elements in the Chrome console?

Is there a way to easily copy all the HTML code from elements that have the "abc" class? I attempted using $('.abc') in the Chrome DevTools console, but it only returns an array that I can't expand and copy all at once... Any suggestions on ...

javascriptjquerygoogle-chrome

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

cssgoogle-chromezoominglessribbon

Failure occurs when attempting to send an object with an empty array using jQuery ajax

Looking to use jQuery Ajax PUT to send an object with an empty array `{value: {tags: []}}` to a Node.js express server, encountering the issue where `req.body.value` is undefined in the express `app.put()` handler. While suspecting jQuery as the culprit af ...

jquerynode.jsajaxexpress

Implementing the class "col-xxl" is creating additional padding within the fluid container in Bootstrap

After playing around with the bootstrap grid system, I ran into a problem with the "col-xxl" class. Can anyone help me figure out why this issue occurred and how to fix it? <style> [class*="col"] { padding: 1rem; background ...

htmlcsscss-gridpaddingbootstrap-5

Exploring the Differences Between Arrays of Objects and Arrays in JavaScript

While working on a project for a client, I encountered an interesting problem. I have two arrays - one with objects and one with values. The task is to populate the array of objects with new objects for every item in the value array. To clarify, here is th ...

javascriptarraysjsonobject

Tips for creating space between two fluid divs

I'm currently facing an issue with the spacing between two child divs inside a parent div. The web page needs to be responsive for different screen widths, but the vertical space between the left and right divs is not behaving as expected. I am using ...

jquerycsspositioninghtml

What are the different scenarios in AngularJS where $scope is utilized versus when var is utilized?

Which is more efficient in AngularJS: using var or $scope. for variables inside functions? I am asking this question because I recently came across information about $watch, $digest, and $apply in AngularJS. While I may not have fully grasped the concept ...

javascriptangularjsangularjs-scope

JavaScript error in the Electron browser is causing a glitch

I am a beginner in the world of Node.js, JavaScript, and Electron. My goal is to create a basic application that can open a local HTML file in a browser window. The local file contains some complex embedded JavaScript (TiddlyWiki). Below is a snippet of sa ...

javascriptnode.jselectrontiddlywikitiddlywiki5