lit-html: How to render back

Question

Im trying to have a menu multiple options rendered onclick but also the possibility to get back to the menu with back button.

I'm doing something wrong or it is just not possible and I might not have grasp the concept of rendering and lit-html but I can't get back to the menu after the first rendering and I need it to make the menu dynamic. Any help is welcome for this or another option for a nice menu.

Thank you

{% load static %}
{% load met_list_tags %}
{% load i18n %}
<script type="module">

  import {html, render} from 'https://unpkg.com/lit-html?module';

  const flapSupport = () => html`
  {% include 'flap-support.html' %}
  `;

  const flapContactSupport = () => html`
  <button type="button" class="backToSup" name="button">Back</button>
  {% include 'flap-contact-support.html' %}
  `;

  const flapFaq = () => html`
  <button type="button" class="backToSup" name="button">Back</button>
  {% include 'flap-faq.html' %}
  `;

  render(flapSupport(), document.getElementById("supportFlap"))

  $(document).ready(function() {
    $(".openContact").on("click", function(){
      render(flapContactSupport(), document.getElementById("supportFlap"));
    })
    $(".openFaq").on("click", function(){
      render(flapFaq(), document.getElementById("supportFlap"));
    })
    $("#backToSup").on("click", function(){
      render(flapSupport(), document.getElementById("supportFlap"));
    })
  });
</script>
<div id="supportFlap"></div>

my support.html file

{% load static %}
{% load met_list_tags %}
{% load i18n %}

<div class="circle-side-content" style="padding-top:1vh;">
  <button type="button" name="button" class="openContact">1</button>
  <button type="button" name="button" class="openFaq">2</button>
</div>

my flap-support.html

Answer 1

Found the answer:

{% load static %}
{% load met_list_tags %}
{% load i18n %}
<script type="module">

  import {html, render} from 'https://unpkg.com/lit-html?module';

  const flapSupport = () => html`
  <div class="flap-list" style="padding-top:1vh;display:flex;">
    <button @click=${openContact} type="button" name="button" class="list-btn meetbtn">CONTACT <i class="fas fa-chevron-right"></i></button>
    <button @click=${openFaq} type="button" name="button" class="list-btn meetbtn">FAQ <i class="fas fa-chevron-right"></i></button>
  </div>
  `;

  const flapContactSupport = () => html`
  <div class="title-flap-section">
    <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button>
    <h2>Contact</h2>
  </div>
  {% include 'flap-contact-support.html' %}
  `;

  const flapFaq = () => html`
  <div class="title-flap-section">
    <button @click=${backToSup} type="button" name="button"><i class="fas fa-arrow-left"></i> Back</button>
    <h2>FAQ</h2>
  </div>
  {% include 'flap-faq.html' %}
  `;



  const backToSup = {
    handleEvent(e) {
      render(flapSupport(), document.getElementById("supportFlap"))
    },
  };

  const openContact = {
    handleEvent(e) {
      render(flapContactSupport(), document.getElementById("supportFlap"))
    },
  };

  const openFaq = {
    handleEvent(e) {
      render(flapFaq(), document.getElementById("supportFlap"))
    },
  };

  $(document).ready(function() {
    render(flapSupport(), document.getElementById("supportFlap"))
  });
</script>
<div id="supportFlap"></div>

This allows me to create a menu with a back button to navigate in the same way a mobile would do.