Assets: Links
Assets: Links
Links:
Page Links:
1. Menu Route/Home ( New Kitchen King (II) ): Link
Post Links:
2. Menu Route ( New Kitchen King (II) ): Link
3. Post section Links:
Example:
Page Link -
https://kitchen-king-pages.blogspot.com/2025/07/basic-menu-items-desplay-code-basic.html#Green-Salad
https://kitchen-king-pages.blogspot.com/2025/07/basic-menu-items-desplay-code-basic.html
1. Hidden id -
id="starterSection"
2. Hidden in hidden Section id -
id="Green-Salad"
The Section Link for button is -
( item will be open after
Section will be open )
Button for open a section: hide then hide in hide section target to direct open
With redirect notice:
Button Code -
1.
<div><a href="https://kitchen-king-pages.blogspot.com/2025/07/basic-menu-items-desplay-code-basic.html#Green-Salad</a></div><br />
Without redirect notice:
Button Code -
2.
<div><a href="https://kitchen-king-pages.blogspot.com/2025/07/basic-menu-items-desplay-code-basic.html#Green-Salad" target="_blank" rel="noopener noreferrer">
<button style="padding: 10px 20px; background-color: green; color: white; font-size: 18px; border: none; border-radius: 6px; cursor: pointer;">
Green Salad
</button>
</a></div><br />
3.
<div><a href="https://kitchen-king-pages.blogspot.com/2025/07/basic-menu-items-desplay-code-basic.html#Green-Salad"
target="_blank"
rel="noopener noreferrer"
style="display: inline-block; padding: 10px 20px; background-color: green; color: white; font-size: 18px; border: none; border-radius: 6px; cursor: pointer; text-decoration: none;">
Open Green Salad
</a></div><br />
To open directly the item:
JS for the item post html is - added in js top
1.
Not hidden:
<script>
window.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash;
if (hash) {
const target = document.querySelector(hash);
if (target) {
target.style.display = 'block'; // Unhide it
target.scrollIntoView({ behavior: 'smooth' });
}
}
});
</script>
2.
Hidden then hidden in hidden:
<script>
window.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash;
if (hash) {
const target = document.querySelector(hash);
if (target) {
// Open parent sections if needed
const starter = document.getElementById("starterContent");
const salad = document.getElementById("saladContent");
if (starter) {
starter.style.display = "block";
const btn = document.getElementById("starterOpenBtn");
if (btn) btn.style.display = "none";
}
if (salad) {
salad.style.display = "flex";
const btn = document.getElementById("saladOpenBtn");
if (btn) btn.style.display = "none";
}
target.style.display = "block";
target.scrollIntoView({ behavior: "smooth" });
}
}
});
</script>
3.
Page - " Kitchen King II "
Used Full Script -
<script>
window.addEventListener('DOMContentLoaded', () => {
const hash = window.location.hash;
if (hash) {
const target = document.querySelector(hash);
if (target) {
// Open parent sections if needed
const starter = document.getElementById("starterContent");
const salad = document.getElementById("saladContent");
if (starter) {
starter.style.display = "block";
const btn = document.getElementById("starterOpenBtn");
if (btn) btn.style.display = "none";
}
if (salad) {
salad.style.display = "flex";
const btn = document.getElementById("saladOpenBtn");
if (btn) btn.style.display = "none";
}
target.style.display = "block";
target.scrollIntoView({ behavior: "smooth" });
}
}
});
// 🔹 Manual open/close for starter
function openStarter() {
document.getElementById("starterContent").style.display = "block";
document.getElementById("starterOpenBtn").style.display = "none";
}
function closeStarter() {
document.getElementById("starterContent").style.display = "none";
document.getElementById("starterOpenBtn").style.display = "inline";
}
// 🔹 Manual open/close for salad
function openSalad() {
document.getElementById("saladContent").style.display = "flex";
document.getElementById("saladOpenBtn").style.display = "none";
}
function closeSalad() {
document.getElementById("saladContent").style.display = "none";
document.getElementById("saladOpenBtn").style.display = "inline";
}
</script>
Comments
Post a Comment