How to display/hide a div in another html page

Question

I have two html pages (produse.html and item.html) and a menu in one of them. When I click a link from the menu I need to go to the other page and in the same time display a specific div and hide the original one from item.html.

I tried it with javascript using onclick method, but it doesn't work. I think the problem is that the javascript code can't get the class name of a div that is in another page.

Can there be something done?

This is the code that I tried.

produse.html

    <div class="sideMenu">
        <a href="item.html" onclick="displayTheBox(0); return false;">prod 1</a>
        <a href="item.html" onclick="displayTheBox(1); return false;">prod 2</a>
        <a href="item.html" onclick="displayTheBox(2); return false;">prod 3</a>
        <a href="item.html" onclick="displayTheBox(3); return false;">prod 4</a>
    </div>

item.html

    <div class="displayBox yes">
        1
    </div>

    <div class="displayBox">
        2
    </div>

    <div class="displayBox">
        3
    </div>

    <div class="displayBox">
        4
    </div>

javascript

var prevN = 0;

function displayTheBox(n){
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

css

.displayBox{
    float: left;
    height: 200px;
    overflow: auto;
    position: relative;
    box-shadow: 1px 1px 4px 2px #9b9b9b;
    background-color: #bbe5f8;
    border-radius: 6px;
    width: 995px;
    margin: 0 0 0 235px;
    display: none;
}
.yes{
    display: block;
}

Add url variables to the links, so something like `href="item.html?hide=0"` then when you go to that page you can read the variable and hide appropriately. — nurdyguy, Dec 09 '19 at 20:26
You can store a parameter in LocalStorage of user's browser and then depending on that show it or not. It will stay even after refresh and links will be the same. — Andrew, Dec 09 '19 at 20:29
There are two ways you can manage this 1. passing value to url params, 2. setting it to local / session storage — Sarvesh Mahajan, Dec 09 '19 at 20:29
Or, have everything in one main page and load the different bits of content via AJAX — ADyson, Dec 09 '19 at 20:32
I don't see the reason why you put side bar on it's own page. This is just a bad approach above anything. — Mosia Thabo, Dec 09 '19 at 20:44
Thats true, if OP wants to use similar approach, he should look into React or Vue because you can make separate components and link them all together — Andrew, Dec 09 '19 at 20:51

Ajay Singh · Accepted Answer · 2019-12-09T21:05:55.123

JS is a client-side script and it's variables are reset on page load. You can either pass the values by passing as GET parameters or by saving and retriving persistent data using localStorage or cookies.

Here is a simple js function to get GET variables and process function.

function findGetParameter(parameterName) { // Gets the GET variables
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

if(findGetParameter("item")) { // Check if parameter matches
   displayTheBox(findGetParameter("item"));
}
var prevN = 0;

function displayTheBox(n) {
    var products = document.getElementsByClassName("displayBox");

    products[prevN].className = products[prevN].className.replace(" yes", "");
    products[n].className += " yes";

    prevN = n;
}

Change your hyperlinks to

<div class="sideMenu">
    <a href="item.html?item=0">prod 1</a>
    <a href="item.html?item=1">prod 2</a>
    <a href="item.html?item=2">prod 3</a>
    <a href="item.html?item=3">prod 4<a>
</div>

For more info on storage methods, check this SO question What is the difference between localStorage, sessionStorage, session and cookies?

For a good example on js session storage, check this answer to a SO question here https://stackoverflow.com/a/49805713/6060602

score 0 · Answer 2 · answered Dec 09 '19 at 20:34

Actually, when you're making a function call in a page, it can't be reflected in another one. You've to use backend for that job. But as per your problem is concerned, you may use a language like PHP for doing this job. Otherwise, you can make a function call at the beginning when the new page is opened. like, window.onload() or jQuery may also be helpful in this case,

$(document).ready(function() { /* code here */ });

score 0 · Answer 3 · answered Dec 09 '19 at 20:43

That is impossible through normal click events like that.

Two pages will need to interact and since requests are stateless, everything that belongs to one page only really lives in there and nowhere else.

So to perform that, you will need to pass the communication through the request object.

Options:

First - Either create a form line this:

<form action="targetPage" method="get">
    <input type="hidden" value="hideSomething" />
    <button></button>
</div>

Then inside your TargetPage, retrience the query string from the URL, FInd out more about this here

Second - Either you're not sure if that is the right approach you want to take. Look closer into what you're trying to achieve and see if it's really necessary. I am not sure why you're trying to put those buttons( sideMenu ) on their own page seperate from where the boxes you're trying to control are.

How to display/hide a div in another html page

3 Answers3