在下一页单击时隐藏div

Question

I want to hide a div on the next page on the click of a button. Meaning, people will click a button and go to the next page and on the next one I want to apply a '.hide()' with jquery or a 'display: none' for one div. What would be the best way I can do this? I know how to do this when they're on the same page and with the click of a button, but not if you click the button, go to the next page and then hide something from there.

Help! And thank you!!

I've tried the sessionStorage but I don't know if I'm applying it correctly. The button is from a form and when they click Sign up and it would redirect to another page, the I want one div to be hidden only if the button from the past webpage is clicked. If not the div should be there.

Button from page

<button id='sign-up-but' class='submit' type="submit" onclick="hiddenInfo()">Sign Up</button>

Form I want to hide - Shown on next page after Sign up button is clicked

<div id="missing-information" class="card"> Form </div>

I want 'missing-information' disappear after 'sign-up-but' is clicked and redirected to next page.

Answer 1

If I understand your question correctly, then you could use the LocalStorage Web API combined jQuery to achieve this - please see the comments in the code snippet below:

Javascript:

// Requires jQuery, include this script in both pages of website
$(function() {

  // When sign-up-but clicked, use localStorage to remember to hide
  // the missing-information div by using localStorage.setItem()
  $('#sign-up-but').click(function() {
    localStorage.setItem('missing-information', 'hide');  
  });  

  // When the page is loaded and this script is run, check if 
  // "missing-information" has "hide" in localStorage
  if(localStorage.getItem('missing-information') === 'hide') {

    // If "hide" is in local storage, then hide() any element with
    // id of missing-information that exists on the page
    $('#missing-information').hide();
  }

});

HTML:

<!-- Remove onclick handler -->
<button id='sign-up-but' class='submit' type="submit">Sign Up</button>

<div id="missing-information" class="card">
Missing information
</div>