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
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.