Maintain the state of the toggle div after page refresh or modification

In this scenario, I am looking to ensure that my div remains open even if the page is changed or refreshed. Below is the HTML and JavaScript code provided:

You can view the working code here: http://jsfiddle.net/wasimkazi/fauNg/1/

    $(".widget2").hide();
    $(".box2").toggle(function() {
        $(this).next(".widget2").slideDown(200);
    }, function() {
        $(this).next(".widget2").slideUp(200);
    });

    $(".inner").hide();
    $(".box").toggle(function() {
        $(this).next(".inner").slideDown(200);
    }, function() {
        $(this).next(".inner").slideUp(200);
    });?

<div class="box2"><h3>Basketball</h3>
</div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"><h3>Australia</h3></div>
        <div class="inner" style="display: block; ">
            <ul class="leagues">
                                    <li class="even"><a href="/baloncesto/australian-nbl/" class="league-145">Australian NBL</a></li>
                            </ul>
            <div class="clear-both"></div>
        </div></div>
</div>?

Answer №1

Implementing the use of JavaScript cookies is essential for saving and retrieving the "Open" and "Close" states of each menu on the webpage. This approach ensures that the state of the menus persists even after page refreshes, preventing everything from being reset.

Answer №2

By modifying the value after the # in the URL, you can initiate a change. After refreshing the page, extract this updated value from the hash using $(document).ready() and implement the necessary modifications.

Answer №3

To determine if a div is hidden, you can utilize the is function and then display it accordingly.

if($(".selector").is(":hidden"))
   $(".selector").show();

Additionally, as @mikel suggested, ensure to enclose this code within the document ready function to perform the check during page load.

$(document).ready(function(){
      if($(".selector").is(":hidden"))
       $(".selector").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

Running repetitive tasks in PHP using setInterval function

I've been working on adding a "friend request" feature to my website and I really want the requests to show up instantly without having to reload the page. After doing some research, it seems like using setInterval with Ajax is the way to go. I found ...

Utilizing Vue Router to leverage specific getters from Vuex

I am currently facing an issue with accessing the authenticated user in my Vuex store within my router.js file. { path: '/admin/login', name: 'admin-login', component: AdminLogin, beforeEnter(to, from, next) { console.log(s ...

Generating a fresh array of unique objects by referencing an original object without any duplicates

I can't seem to figure out how to achieve what I want, even though it doesn't seem too complicated. I have an array of objects: { "year": 2016, "some stuff": "bla0", "other stuff": 20 }, "year": 2017, "some stuff": "bla1", ...

The Ajax query returned a successful response, yet it unexpectedly triggered an error

Currently, I am delving into the realm of mongodb. I have integrated Express, Body-Parser, and Mongoose into my project, and I'm retrieving data from an online mongodb database hosted on mlab. Everything seems to be functioning smoothly as I've t ...

How do popular social media platforms such as Facebook and Twitter utilize real-time APIs to display live updates in news feeds

I'm curious about the technology being used for real-time updates, and I doubt they rely on AJax methods like setInterval() to make server requests every second. This approach could be inefficient with a large number of concurrent users. Do you think ...

Unlocking Discord Account Information through OAuth2

Currently, I am in the process of developing a moderation bot for Discord. I am working on implementing a paid plan and as part of that, I require users to log in with their Discord account using OAuth2. This allows me to retrieve user data and identify wh ...

Showing the initials of a user at the top of an SVG using ReactJS

https://i.sstatic.net/oJgXs.png I require the user's initials to be displayed on the avatars as a grey circle with those initials. I have the function ready, but I am unsure of how to implement it in the JSX code for the Dropdown menu (using Semantic ...

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

Dynamic modal in Vue JS with custom components

Within the news.twig file {% extends 'layouts.twig' %} {% block content %} <section class="ls section_padding_bottom_110"> <div id="cart" class="container"> <cart v-bind:materials=" ...

This asynchronous function will provide a response of "undefined"

Having a challenge with an async function that should return a geocode value: async function getLocationCoordinates(place){ //var str; return googleMapsClient.geocode({ address: place }).asPromise() .then((response) => { response.json.results[0].ge ...

Vue component failing to display data passed as props

As a Vue beginner, I ventured into creating a custom component and attempted to bind everything just like in the basic Vue CLI template. Here is my code snippet. Circle.vue <template> <div :style="custom"> </div> </template&g ...

What is the best way to add a triangle pointer to the Vuetify v-menu component?

Is there a way to insert a triangular pointer into the v-menu component of Vuetify 2.x? I am referring to this common feature found on web pages (as seen in this screenshot from Github): https://i.stack.imgur.com/DMOjF.png I have included sample code he ...

Retrieving Files using Ajax Across Different File Types

I recently came across the following code snippet: DOM_imgDir = "img/UI/DOM/"; fileextension = ".jpg"; $.ajax({ url: DOM_imgDir, success: function (data) { $(data).find("a:contains(" + fileextension + ")").each(function () { filename = thi ...

Performing JSON data extraction and conversion using JavaScript

Hello! I'm working with a script that converts data into an array, but I want to enhance it so that I can extract and convert data for each object (arb, astar, aurora, avax, baba, bsc, etc.), as shown in the screenshot. Here is the current script tha ...

"Extracting information from the axios header and passing it to a Vue component: A step-by-step

I am working with an axios apiClient and trying to retrieve the email stored in localStorage to use in the header of my component. I attempted to access the email by using response.headers['email'] and storing it in a variable called email, but ...

How to pass arguments to the `find` method in MongoDB collections

I've been attempting to pass arguments from a function to the MongoDB collection find method. Here's what I have so far: async find() { try { return await db.collection('users').find.apply(null, arguments); } catch(err) { c ...

Unlocking the contents of an array from a separate file in Next.js

I am developing a Quiz App that consists of two main pages: takeQuiz.js and result.js. My goal is to transfer the data from the multiple-choice questions (mcqs) in takeQuiz.js to be accessible in result.js. Utilizing router.replace(), I ensure that once th ...

Having trouble with Bootstrap 4 maintaining consistent width when affixing the sidebar

Hello there, I'm currently working with Bootstrap 4 and trying to implement affix on the sidebar. I have set up three columns for the sidebar and made them fixed under certain conditions. However, I am facing an issue where the width of the sidebar ch ...

Assign a "margin-bottom" value of "0" to all elements in the final row of a responsive layout

I'm currently working on a Bootstrap responsive template design where I have multiple items arranged in rows. The number of items per row and the number of rows vary depending on the screen resolution. <div class="row"> <div class="col-xs- ...

I'm struggling to make this script replace the values within the table

I am struggling with a script that I want to use for replacing values in a google doc template with data from a google sheet. The script is able to recognize the variables and generate unique file names based on the information from the google sheet. Howev ...