Hide element by swipe

[sardukarsilver]

For example, I have tile-list with 3 elements and by click on an element opens a new screen with some info for this element. Is there any way to make swipe(from left to right for example) opened the screen and hide it and then by click on another element reuse screen again. It's some kind of multiscreen app.

< svg >
  <defs>
    <symbol id="my-tile-item" href="#tile-list-item" focusable="false"
      pointer-events="none" system-events="all">
      <text id="text" />
      <rect id="tile-divider-bottom" class="tile-divider-bottom" />
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%"
        height="100%-2" opacity="0" />
    </symbol>
    <symbol id="info">
      <rect id="background" />
      <text id="some-info" y="50%" x="50%" font-size="26" font-family="Colfax-Bold">example</text>
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%" height="100%" opacity="0" />
    </symbol>
  </defs>

  <use id="my-list" href="#tile-list">
    <var id="separator-height-bottom" value="2" />
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 1" />
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%" height="100%" opacity="0" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 2" />
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%" height="100%" opacity="0" />
    </use>
    <use href="#my-tile-item" class="tile-list-item">
      <set href="text" attributeName="text-buffer" to="Menu item 3" />
      <rect id="touch-me" pointer-events="all" x="0" y="0" width="100%" height="100%" opacity="0" />
    </use>

    <use id="utils" href="#info" />

  </use>
</svg >


import document from "document";

let utils = document.getElementById("utils");
let infoText = document.getElementById("some-info");
let list = document.getElementById("my-list");
let items = list.getElementsByClassName("tile-list-item");

utils.style.display = "none";

items.forEach((element, index) => {
  let touch = element.getElementById("touch-me");
  touch.onclick = (evt) => {
    console.log(`touched: $‌{index}`);
    if (index === 0) {
      utils.style.display = "inline";
      infoText.text = "example01";
    }
    if (index === 1) {
      utils.style.display = "inline";
      infoText.text = "example02";
    }
    if (index === 2) {
      utils.style.display = "inline";
      infoText.text = "example03";
    }
  }
});

[JonFitbit · Accepted solution]

You can probably simulate a swipe by using mousedown and mouseup then measure the X coordinates, but we don't have a swipe gesture.