To show/hide a div on different html page

Question

So basically I have two different HTML pages. I wanted to create a function that when a button on the first html page is clicked, then it will show/hide a div element on the second html.

Can this be done with javascript?

Thanks in advance

@How can you have two html pages? you can use ajax and load in the same page. When the second page load everything will be fresh , Please let us know what is your exact requirement — kobe, Feb 24 '13 at 21:54
Are both web pages open at the same time? Are they from the same domain? Did one open the other? — Ash Burlaczenko, Feb 24 '13 at 21:54
You can use `localStorage` to store your changes and recall them upon new-page load. — Roko C. Buljan, Feb 24 '13 at 21:56

score 1 · Answer 1 · answered Feb 24 '13 at 22:11

AS @roXon mentioned one option you could do this with HTML5 storage.

E.g.

if(typeof(Storage)!=="undefined")
  {
     $('#FirstClick').on('click',function(){
        localStorage.clickedDiv = $(this).attr('id');
        $(this).hide();
     });
  }
else
  {
     $(this).hide();
  }

Then on the second page.

$(function(){
   $(localStorage.clickedDiv).hide();
});

Or for more backward browser support you could use cookies.

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

I not sure what you mean by second html page, maybe you mean content? With jQuery this can be done... for example...

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>

<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
<a href="#" class="show_hide">hide</a></div>

css

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}

Maybe you mean to load content on a second page (or interact with it ) see http://api.jquery.com/load/ and question: Load content of a div on another page

edited May 23 '17 at 11:56

Community

1
1

answered Feb 24 '13 at 21:56

Glyn Jackson

8,228
4
29
52

1

??? 1.3.2 ..... are you sure you would not suggest some newer *version* ? And how does this answers the question anyway? – Roko C. Buljan Feb 24 '13 at 21:58
1

I'm pretty sure this isn't what the question asks. He has asked when an item is clicked on the first page and then redirected to a second page... the item clicked on the first page is then hidden on the second. And yeah 1.3.2 is a little outdated – dev Feb 24 '13 at 22:00
sorry cut and paste from old code I had. updated, should work with latest too. – Glyn Jackson Feb 24 '13 at 22:00

score 0 · Answer 3 · answered Feb 24 '13 at 22:01

0

If the browser support HTML5 storage you can save a variable http://www.w3schools.com/html/html5_webstorage.asp

Otherwise you'll need to pass a GET parameter or a cookie.

answered Feb 24 '13 at 22:01

Ciack404

196
1
2
13

To show/hide a div on different html page

3 Answers3