HTML hyperlink extending list in other file

Question

I have a image with hyperlink to another HTML file which includes list. The main goal is to click on that image and go to another HTML file and extend the item I clicked in first file. For example: In first file I have items with hyperlink- Bloody Mary, Mojito, Margarita and Pina colada. In second file I have extendable list with the same items. When I click on item (in first file), for example Mojito, it goes to second file and extends Mojito's recipe. Rest of cocktails stay unextended. How can I reach that?

File one

<article class="style1">
    <span class="image">
        <img src="images/pic01.jpg" alt="" />
    </span>
    <a href="SecondFile.html">
        <h2>Information</h2>
            <div class="content">
                <p>
                    Some info
                </p>
            </div>
    </a>
</article>

File one picture. Clickable box

Second file

<button class="accordion">Mojito</button>
<div class="panel">
    <div class="container-fluid">
        <p> Extendable Recipe </p>
    </div>
</div>

Script

var acc = document.getElemntsByClassName("accordion");
var i;
for (i=0, i<acc.length, i++) {
   acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElemntSibling;
      if (panel.style.display==="block") {
         panel.style.display = "none";
      } else {
         panel.style.display = "block";
      }
  });
}

File two picture. Extended list

Possible duplicate of [Share variables between html pages](https://stackoverflow.com/questions/21128692/share-variables-between-html-pages) — gflegar, May 13 '18 at 17:03

score 0 · Answer 1 · answered May 13 '18 at 17:05

This could be done in a number of ways, the simplest would be to utilize existing frameworks such as bootstrap or materialize. Check out their documentation they both have collapsible/accordion components that you can insert with their pre built css classes, you can of course condition the class upon the click and therby accomplish what you are suggesting.

HTML hyperlink extending list in other file

1 Answers1