Reveal a secret div on the page by clicking a link to unlock its contents

Question

Reveal a secret div on the page by clicking a link to unlock its contents

I'm working on an HTML page where a hidden div is supposed to become visible when a button is clicked. The code snippet I have is:

$('#display').click(function(){
    $('#itemList').removeClass('hide');
    ...
})

Now, on another page, there's a link that takes the user back to the first page. When this link is clicked, the element with id='itemList' should also become visible. Here's the code for that link:

<a href='firstHTML.php'> View items</a>

I'm not quite sure what else I need to add to ensure that the other page loads with the previously hidden element now visible. Any suggestions or help would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

If you're looking for a reliable solution, localStorage is one of the most suitable options. Alternatively, you could also consider using Cookies or passing values through string queries to another page.

Let me demonstrate how you can utilize localStorage by storing an ID on click of an anchor:

<a href='firstHTML.php' data-showId='itemList'> View items</a>

Next, attach an event to the anchor:

$("[data-showId]").bind('click',function(){
    var idToShow=$(this).attr('data-showId');
    if(idToShow)
      store('visibleId', idToShow);
});

Now, all that's left is defining these essential functions:

   function setup() {
        var tmp = get('visibleId');
        if (tmp)
          showDiv(tmp);
    } 
    function showDiv(cls) {
        $("#"+cls).removeClass('hide');
    }
    function get(name) {
        if (typeof (Storage) !== "undefined") {
          return localStorage.getItem(name);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
          localStorage.setItem(name, val);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }

Don't forget to invoke setup() when the DOM is ready.

Answer 2

If you're looking for a reliable solution, localStorage is one of the most suitable options. Alternatively, you could also consider using Cookies or passing values through string queries to another page.

Let me demonstrate how you can utilize localStorage by storing an ID on click of an anchor:

<a href='firstHTML.php' data-showId='itemList'> View items</a>

Next, attach an event to the anchor:

$("[data-showId]").bind('click',function(){
    var idToShow=$(this).attr('data-showId');
    if(idToShow)
      store('visibleId', idToShow);
});

Now, all that's left is defining these essential functions:

   function setup() {
        var tmp = get('visibleId');
        if (tmp)
          showDiv(tmp);
    } 
    function showDiv(cls) {
        $("#"+cls).removeClass('hide');
    }
    function get(name) {
        if (typeof (Storage) !== "undefined") {
          return localStorage.getItem(name);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }
    function store(name, val) {
        if (typeof (Storage) !== "undefined") {
          localStorage.setItem(name, val);
        } else {
          window.alert('Please use a modern browser to properly view this template!');
        }
    }

Don't forget to invoke setup() when the DOM is ready.

Answer 3

Answer №2

To start, I would implement the jQuery function to toggle the visibility of the list instead of relying on a separate CSS class:

$('#display').click(function(){
    $('#itemList').toggle();
    ...
})

One potential solution for your issue could involve using a query parameter, like so:

<a href='firstHTML.php?list=show'> View items</a>

And using jQuery:

Create a helper function (Adapted from Get url parameter jquery Or How to Get Query String Values In js):

$.urlParam = function(name) {

  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

  if (results==null){
    return null;
  }else{
   return results[1] || 0;
  } 
}

Retrieve the specified property:
```
var listStatus = $.urlParam('list');
```

Show the list if necessary:

$( document ).ready(function() { 
  if(listStatus == 'show') {
    $('#itemList').show();
  }
});

Answer 4

To start, I would implement the jQuery function to toggle the visibility of the list instead of relying on a separate CSS class:

$('#display').click(function(){
    $('#itemList').toggle();
    ...
})

One potential solution for your issue could involve using a query parameter, like so:

<a href='firstHTML.php?list=show'> View items</a>

And using jQuery:

Create a helper function (Adapted from Get url parameter jquery Or How to Get Query String Values In js):

$.urlParam = function(name) {

  var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);

  if (results==null){
    return null;
  }else{
   return results[1] || 0;
  } 
}

Retrieve the specified property:
```
var listStatus = $.urlParam('list');
```

Show the list if necessary:

$( document ).ready(function() { 
  if(listStatus == 'show') {
    $('#itemList').show();
  }
});

Reveal a secret div on the page by clicking a link to unlock its contents

Answer №1

Answer №2

Similar questions

Remove the browser cache for the user through Javascript

JQuery is unable to access the initial JQuery objects when a new div is loaded during an AJAX event

Prevent the ng-model from updating a disabled input field within an ng-repeat loop

Utilizing data attributes over classes for styling in CSS

The date functionality is malfunctioning on Internet Explorer 8

Flick user media cards left or right to uncover the following one

The django-filters form seems to be experiencing some display issues where only the submit button is visible and

Unleashing the power of ::ng-deep to access CSS in an Angular child component

What is the best way to stack three boxes on top of one another in Nextjs Tailwind?

Unveiling Fresh URLs within an iFrame

What is the best way to retrieve the maximum date associated with a particular foreign key in SQL Server?

Using the `form` method with `get` works perfectly in Node.js, however, the status remains pending when checking in the developer tools

The request to sign up at 'https://identitytoolkit.googleapis.com/v1/accounts:/signUp? from the origin 'http://localhost:8080' has been denied

A simple way to clear an input type=number field with JavaScript when clicked by the user

Collect data from website submissions via email

Designing a mobile user interface for time intervals

What is the best way to create a clickable entity that is being dynamically generated in a networked A-Frame environment?

Ways to invoke jQuery(this) within an anchor tag's onclick event handler

Unable to view videos shared by users in PeerJS and WebRTC video chat application from different tabs

Issue encountered while utilizing PHP sessions