Is there a way to retain page state even after navigating away and returning?

I have successfully implemented a button feature that expands the Read More section on my website.

// CODE FOR EXPANDING READ MORE SECTION
$("#readMoreDiary").on("click", function(){

    $("#diary-content").addClass("showTextThree");
    $("#readMoreDiary").addClass("hide");
    $("#closeDiary").removeClass("hideExitDiary");

    $(".showTextThree").addClass("animated fadeIn");
    $(".showTextThree").one("animationend",function(){

        $(this).removeClass("animated fadeIn");
    });
});

When navigating back from page2.php to the index page, I want the "Read more" section to remain open. (page2.php will be accessed from the Read More section.)

If a visitor who is viewing the Extended Read More section clicks a link to go to page2 and then returns, I would like them to return to the index page with the Read More Section extended.

How can I achieve this functionality?

jqueryhtmlcssbutton

Answer №1

If you're looking to maintain states, here is a potential solution: Utilize LocalStorage to establish a marker when transitioning between the home page and page2. Remove the marker when switching back from page2 to the home page. Check for the marker's presence and display the "EXTENDED VERSION."

<script type="text/javascript>
$(document).ready(function(){
    var ls = $.localStorage;
    var flag = ls.get("flag_show");

    if( flag != null && flag == true ) {
        $("#diary-content").addClass("showTextThree");
        $("#readMoreDiary").addClass("hide");
        $("#closeDiary").removeClass("hideExitDiary");

        // REMOVE THE MARKER IF STATES DO NOT NEED TO BE MAINTAINED
        ls.remove("flag_show");
    }

    $("#readMoreDiary").on("click", function(){
         // your code here
         // SET THE MARKER IN LOCALSTORAGE
         ls.set("flag_show", true);
     });
});


</script>

Make use of jQuery's LocalStorage API available here.

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

Querying MYSQL database using PHP and JQuery

I currently have a gallery of images where the results are limited to 10. My goal is to use jQuery to load the next 10 rows (images) from the database when the 'Load more Results' button is clicked. Right now, I utilize a class called query.php ...

phpjquerymysqlajax

Tips for validating email addresses and enforcing minimum length requirements

In order to validate email input for the correct format and ensure minimum length validations for first name and password, I am looking to utilize only bootstrap. While I have successfully implemented required field validations for the inputs, I am unsure ...

javascripthtmltypescriptbootstrap-4

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Although my current approach works, I believe there may be a more efficient way to implement this in Angular. The situation is as follows: Imagine nested, inflected paths like /logos and /logo/:id The markup below functions as intended: <li class ...

javascripthtmlangulartypescript

Experiencing issues with uploading a basic .html website using FileZilla

Currently attempting to launch a very basic website using the free webspace provided by my college. The webspace includes a www and a data folder - www for the website and data for regular data purposes. I have created a simple .html file with JS & CSS tha ...

htmldeploymentweb-deployment

Unexpected focus on bootstrap button data-toggle is causing issues

What is the reason for adding the .focus class to the style of the button? This seems to be preventing the appearance of the button from changing. I found this code on the Bootstrap site, where only the .active class is being toggled, not .focus. <but ...

htmlcssbootstrap-4

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

For my Amazon.es web scraper built with Selenium, I am using a CSS selector to determine the total number of pages it will iterate through. However, the selector name seems to change dynamically and I must update it daily. As someone not well-versed in H ...

pythonhtmlcssseleniumweb-scraping

The second parameter of the Ajax request is not defined

Having an issue with my Ajax request in Vue.js where the second parameter is logging as undefined in the console. I've been trying to fix this problem but haven't found a solution yet. This is the code snippet for $.ajax(): //$.ajax() to add ag ...

javascriptjqueryajaxvue.js

Tips on keeping an HTML element from shifting when resizing the browser window (how to lock an element in a specific position on a webpage)

As a newcomer to front-end web development, I recently attempted creating a basic responsive page. While working on this project, I encountered an issue with the candle holder image. This image is size-responsive, meaning it adjusts in size as the browser ...

htmlcss

Using jQuery's ajax function to send data with a variable name of data field

I am trying to figure out how to dynamically add a variable to the name of the data field I want to send information to through ajax. Below is an example of the code I'm working on: var qty = $('#qty_'+value).val(); $.ajax({ url: &apo ...

javascriptjqueryajax

The success of your order hinges on jQuery being defined when using browserify

I encountered an issue while attempting to utilize a plugin located in /js/lib/stellar.jquery.js: var $ = require('jquery'); require('./lib/stellar.jquery') $(function(){ $.stellar(); }); Upon running the code, I received an err ...

javascriptjquerynpmbrowserify

Using AJAX to dynamically update multiple checkboxes

I have a bunch of checkboxes displayed on my HTML page using PHP. Users can select more than one checkbox from the list. <?php $got = mysqli_query($con, "SELECT * FROM JobChoose"); $checkbox = ''; while ($row = mysqli_fetch_assoc($got)) ...

phpjqueryhtmlajax

Incorporating personalized CSS into Drupal 7 for concealing the notice

Utilizing my custom block to showcase a flash game on the main page of my Drupal 7 setup, I encountered an irksome message: <div id="first-time"><p>No front page content has been created yet.</p> <div class="item-list"><ul>&l ...

cssdrupaldrupal-7

Surprising pause in the menu transition animation

Currently, I am in the process of developing a menu that seems to have some flaws. One issue is that it appears a bit choppy, but the more concerning problem is the half-second delay after clicking an item before it animates. The concept behind this menu ...

javascriptjqueryhtmlcss

Problem: Needing an additional click after selecting a menu item in Jquery

After countless days of seeking help on this platform, I am finally making my first post here to express my gratitude for all the support I have received. I am diving into the world of mobile app development with my very first project - a calculator/conve ...

javascriptjqueryhtmlcssjquery-mobile

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...

javascriptjqueryhtmlcssgridview

Partial View Not Displaying in IONIC App

Struggling to navigate to a partial view from the main view in Ionic, despite following all the rules. Here's my code: The index.html: <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> & ...

javascripthtmlionic-framework

Codepen fails to function properly after being uploaded to a server

I have encountered an issue with my code on CodePen. After exporting it as a .zip file and attempting to run it on a local server, it failed to work. I am unsure of the exact reason behind this. I made sure to include all the necessary dependencies in the ...

javascripthtmlcssjsonrss

Ways to conceal and reveal to enhance an element

My goal is to create a two-part block where hovering over the title (with id = 0) will display the corresponding image with id = 0. Similarly, when hovering out, the image will hide. By default, the image with id 0 should be active. I attempted the followi ...

jquery

Overflowing text in the div element

Attempting to generate a sample document and aiming to enlarge the font-size by clicking the "Medium" & "Large" button. Encountering an issue where the font-size overlaps with other divs when pressing the "large" button, though not experiencing any proble ...

jqueryhtmlcss

Create a responsive design for both iframes and embedded videos

When using PlusThis for video tracking, the code functions well on desktop but becomes non-responsive on mobile devices. To maintain the required JavaScript functionality from PlusThis while ensuring responsiveness, I am seeking assistance with modifying t ...

cssiframeresponsive