Don't forget to utilize the toggleClass function on multiple divs while using jQuery

I currently have two div elements (with classes staticclose and sads). The first one is visible while the second one is hidden. When I click to close the first div, the second one appears and vice versa. Is there a way I can utilize jquery.cookie library to remember the state of these div elements?

$('.staticclose').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide');
});

$('.sads').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide'); 
});

Answer №1

Utilizing the functionality of jQuery.cookie as mentioned in your inquiry, here is a possible implementation:

$('.staticclose').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide');
  $.cookie("last_state", "0", {path: "/"});
});

$('.sads').click(function(){ 
  $('.static-ad').toggleClass('hide');
  $('.sads').toggleClass('hide'); 
  $.cookie("last_state", "1", {path: "/"});
});
$(document).ready(function(){
  if ($.cookie("last_state") === "1") {
    //Perform desired action
  } else {
    //Perform desired action
  }
});

Answer №2

If you're looking to store data, you have a few options such as using cookies or HTML5 Storage. Personally, I lean towards HTML5 Storage for its simplicity and efficiency.

For those interested in using cookies, there are resources available like https://github.com/carhartl/jquery-cookie or that can help you get started.

Let's take a look at a simple example using amplify:

First, store an object:

amplify.store( "yourObject", { foo: "bar" } );

Then, retrieve it:

var retrievedValue = amplify.store( "yourObject" );

Alternatively, if you prefer working with jquery cookies:

To set a cookie:

$.cookie('staticclose', 'visible');
$.cookie('sads', 'invisible');

To retrieve a cookie:

$.cookie('staticclose'); // returns "visible"
$.cookie('sads'); // returns "invisible"

Another method is using data attributes to achieve the same outcome. However, if your goal is to remember the state even after reloading the page, cookies may be a better choice.

Here's an example using data attributes:

$("#div1").data("currentState", "visible");
$("#div2").data("currentState", "invisible");

To access the stored data:

var div1 = $("#div1").data("currentState"); // will return "visible"
var div2 = $("#div2").data("currentState"); // will return "invisible"

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

Achieving a bold border on top of an image without altering the image's dimensions

I'm in need of Photoshop-like selection functionality, but when I add a border to the enclosing div that holds the image, the image ends up smaller by twice the thickness of the border. How can I fix this issue? I have attempted a solution by adding ...

1. "Refreshing HTML input elements with updated data guide"2. "Reassign

I am currently utilizing a simple form to insert data into a SQL server using Entity Framework. On the client side, I am implementing AngularJS, while using MVC in the business logic. Within my EmployeesController.cs file: using System; using System.Coll ...

An error occurred: TypeError - Unable to access the 'value' property of a null object during a value change

Example ImageCreating a dynamic form where rows and select box options are added dynamically using 'x' and 'i' increment values in two JavaScript functions. The code works fine when the option selected is 0.5, but throws an error Uncaug ...

Font transparency is not displaying properly

I am attempting to adjust the opacity of text displayed on a d3 pie chart, but I'm facing issues where only the fill is rendering correctly and not the opacity. Below is the code snippet where I am trying to apply opacity: var txts = svg.data([json ...

How can you animate a MUI v4 Grid element using CSS transitions?

I was exploring the potential of using breakpoints in the MUI v4 component to control the visibility of items in my Grid System. How can I create a smooth CSS transition for b, transitioning from 0px to a defined breakpoint size of 3 for xl? Using % works ...

"Is it possible to keep an eye on two different events and take action once they both

I have a menu with different submenus for each list item, all utilizing the same background tag. Currently, when one submenu is open and I hover over another list item, the previous submenus hide and the new one opens. What I want is for the content to cha ...

In the world of MUI, how should one interpret the symbols '&', '>', and '*' when used together?

Currently, I am in the process of building a website using React. To help with this project, I purchased a Material-UI React template. As I was going through the code, I came across the line 4 where it mentions '& > *', and I'm not qu ...

Tips for modifying a singular line within a file using Java

After creating a Java program that enables users to generate a .html file for a website by inputting content into an array, I am now considering adding a feature that allows users to edit an existing css file. Specifically, I am thinking about offering us ...

Clicking on tabs causes their content to mysteriously vanish

I am working on creating a dynamic menu using jQuery that switches content based on tabs. However, I am facing an issue where clicking on a different <li> item causes the content to disappear. Each list item should correspond to different content sec ...

Display the div only when the time variable reaches zero

I want to display a div when the difference between the time imported from the database and the current time is 0. How can I achieve this? Here is the code snippet: while ($row = mysqli_fetch_array($result)) { echo "<div class='alert' id= ...

"Need help on Tumblr: how can I make a div container wrap around a photo

Check out this website. Is there a way to make the div snugly wrap around the image? Currently, it seems to be sticking 4px below the image (as indicated by the red line I added in the background of the div). I'm puzzled as to where those additional ...

The current URL in the browser does not change

My HTML form has a JavaScript function that involves handling the window.location.href. I successfully remove two unwanted query string parameters from the source using this function, as shown in the first and second alert screenshots. However, I encounte ...

Utilizing jQuery/Ajax for dynamically loading a targeted PHP page by its specific id

As a new learner in jQuery/Ajax, I have a query regarding the most efficient method for loading a php page using jQuery/AJAX with an attached ID. It seems like the approach: <?php $id = $_SESSION[id]; ?> <script> var pageUrl = new Array(); p ...

Create a custom horizontal scrolling feature for a list of images inside a div

Just starting out with react and I have an array of image URLs. My current output looks like this: Output Image Link: Looking to remove the scroll bar at the bottom and get rid of scrolls entirely. Here's how I want it to look: Expected Output: Wa ...

IE causing issues with Wordpress Ajax Javascript functionality

I encountered an issue with my JQuery code that seems to work in Chrome and Firefox, but not in IE8 or on my phone. I double-checked the code and there were no additional commas present. The error in IE8 specifically points to... $(document).on('c ...

"An error was thrown due to an illegal invocation while utilizing $.post, although $.ajax seems to be

I've been experimenting with FormData to send data to a different URL, but the code below doesn't seem to be working $("form").on("submit", function(e){ e.preventDefault(); var formData = new FormData(this ...

The .AppendChild() method does not appear to be working as expected following the completion of

Encountering a peculiar problem here. The scripts run smoothly, but the content doesn't display on screen until I "inspect element" and then close the inspector window or zoom in/out. It's not an issue with the "display" CSS property because even ...

The radio buttons fail to function properly or update when clicked

Seems like I am facing a strange issue....it seems simple (and trivial for some) but it just won't work. I have a basic div with some radio buttons that are not changing state when clicked... <div id="payments_tab" class="tab-pane fade" data- ...

Retrieving information through the $.getJSON() function

As I develop a web application, I find myself in need of initializing certain parameters by fetching them using the $.getJSON() method. $.getJSON("../config/", function(data) { console.debug(data); } These values are important on a global scale with ...

how to use jquery to indicate that a checkbox is selected

click here to see the image $(document).ready(function() { $('.editbtn').on('click', function(){ $('#editmodal').modal('show'); $tr=$(this).closest('tr'); var da ...